vue事件监听

HTML 所监听的事件我们的vue都已经加入了监听
HTML 事件参考手册

下面我们来介绍几个比较常用的事件

1、onclick 元素上发生鼠标点击时触发。 ==> vue用法 @click（）

2、onscroll 当元素滚动条被滚动时运行的脚本。 ==> vue用法 @scroll（）
可以用来监听元素是否滚动到底，如下：

<div @scroll.passive="getScroll($event)"></div>

 getScroll(event) {
      let scrollBottom =  event.target.scrollHeight - event.target.scrollTop -event.target.clientHeight;
      if (scrollBottom == 0 ) {
       //去加载更多
    } 
}

3、ondblclick 元素上发生鼠标双击时触发。 ==> vue用法 @dblclick（）

4、onmousedown 当元素上按下鼠标按钮时触发。。 ==> vue用法 @mousedown（）
下面是一个元素拖动的例子：

<div class="box">
 <div  class="boc"  ref="item" @mousedown="dragx($event)"></div>
</div>
 dragx(el) {
       let oDiv = this.$refs.item; //当前元素
       let disX = el.clientX - oDiv.offsetLeft;
          let disY = el.clientY - oDiv.offsetTop;
          document.onmousemove = function (e) {
            console.log(e)
            //通过事件委托，计算移动的距离
            let l = e.clientX - disX;
            let t = e.clientY - disY;
            //移动当前元素
            oDiv.style.left = l + "px";
            oDiv.style.top = t + "px";
            //将此时的位置传出去
          };
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
      };
    },

.box{
  position: relative;
}
.boc{
  width: 150px;
  height: 150px;
  background-color: #fccccf;
  position: absolute;
}

5、onkeydown 在用户按下按键时触发。 ==> vue用法 @keydown（）

6、onkeypress 在用户敲击按钮时触发。 ==> vue用法 @keypress（）

7、onkeyup 当用户释放按键时触发。 ==> vue用法 @keyup（）

具体可以参考文档HTML 事件参考手册

针对我们的手机H5，提供了手指触摸等事件

事件	描述
touchstart	当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove	当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend	当手指从屏幕上离开的时候触发。

跟踪触摸的属性

属性	描述
touches	表示当前跟踪的触摸操作的touch对象的数组。
targetTouches	特定于事件目标的Touch对象的数组。
changeTouches	表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

属性	描述
clientX	触摸目标在视口中的x坐标。
clientY	触摸目标在视口中的y坐标。
identifier	标识触摸的唯一ID。
pageX	触摸目标在页面中的x坐标。
pageY	触摸目标在页面中的y坐标。
screenX	触摸目标在屏幕中的x坐标。
screenY	触摸目标在屏幕中的y坐标。
target	触目的DOM节点目标。