常见的Web事件

页面事件

Onload --加载

Onunload --取消

Onscroll --滚动

Onresize --大小改变

表单事件

Onsubmit --提交

onchange --变更

Onselect --选择

Onreset --重置

焦点事件

Onfocus --得到焦点

Onblur --失去焦点

鼠标事件

Onclick --点击

Ondbclick --双击

onmouseup --松开

Onmousemove --移动

Onmouseover --停留

Onmouseout --移出

键盘事件

Onkeydown --按下

Onkeyup --松开

Onkeypress --按住

媒体事件

Play --播放

Pause --暂停

ended --停止

内联与外联

内联就是直接在对应事件上写功能，外联则是在JS里统一写，然后在事件上调用自定义函数（也有人叫方法，意思相同）。

示例

<template><div><!-- 内联测试   --><!-- 完整写法   --><button v-on:click="num++">内联事件演示 累加</button><!-- 简写   --><button @:click="num--">内联事件演示 累减</button><p>{{num}}</p><button @:click="add">外联事件演示 累加</button><button @:click="sub">外联事件演示 累减</button></div>
</template><script> export default {data(){return{num:0}},methods:{add(){this.num++},sub(){this.num--}}}
</script>

  传参

事件中的event对象与JS中一样

示例

<template><div><button @:click="add">外联事件演示 累加</button></div>
</template><script>export default {data(){return{num:0}},methods:{add(e){console.log(e.target.innerHTML)e.target.innerHTML='累加'+this.numthis.num++},sub(){this.num--}}}
</script>

自定义函数最大的意义在于传值（或传参），否则意义不大。

  传参示例

<template><div><button @:click="add(1,2)">外联事件演示 累加</button><p>{{num}}</p></div>
</template><script>export default {data(){return{num:0}},methods:{add(a,b){this.num=a+b}}}
</script>

  深入一下，实现对渲染列表中信息的识别

<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p></div>
</template><script>export default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)}}}
</script>

  再深入一下，尝试把event对象也传一下

<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p><p v-for="item in numList" :key="item" @click="showMsgAndEven(item,$event)">{{item}}</p></div>
</template><script>export default {data(){return{numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)},showMsgAndEven(a,e){alert(a+' '+e.target.innerHTML)}}}
</script>

  修饰

由于VUE是模板式，所以可以直接集成了相应的事件修饰，而不用再在去event去做处理。

更多关于事件修饰说明可以进入官方查看

  以下示例用于阻止跳转的代码示例

<template><div><p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p><a @click.prevent="showMsg(1)" href="https://www.baidu.com">baidu.com</a></div>
</template><script>export default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{showMsg(a){alert(a)},}}
</script>