vue事件监听

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

HTML 事件参考手册

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

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

2、onscroll 当元素滚动条被滚动时运行的脚本。 ==> vue用法 @scroll（）

可以用来监听元素是否滚动到底，如下：

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

4、onmousedown 当元素上按下鼠标按钮时触发。。 ==> vue用法 @mousedown（）

下面是一个元素拖动的例子：

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

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

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

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

跟踪触摸的属性

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

1.自定义文件newinput创建一个自定义组件（components目录下）

2.自定义Index.vue引入组件并导出（components目录下）

3.在main.js中全局化组件

4.在newinput文件中定义.$listeners监听方法使Newinput组件上的监听方法全部指向input

vue-lazyload的监听加载完成可以通过监听它的事件来实现，具体实现步骤如下：

1. 安装vue-lazyload，并在main.js中引入。

2. 在页面中使用v-lazy指令来定义图片懒加载元素，并为其添加@loaded事件：

`<img v-lazy="imageSrc" @loaded="onLoaded" />`

3. 在methods中定义onLoaded方法，当图片加载完成时，即可触发该方法：

`methods: {

onLoaded() {

// 加载完成 *** 作

console.log('image loaded!')

}

}`

通过以上步骤，就可以监听vue-lazyload中图片加载完成的事件。

---