前端vue2学习（事件处理）总结

事件处理

<div id="root"><h2>事件处理，hello，{{name}}</hr><button v-on:click="showInfo1">点我提示信息1(不传参)</botton><button @click="showInfo2(12,$event)">点我提示信息2（传参）</botton>
</div>
<script type="text/javascript">
const vm= new vue{el:'#root',data:{name:'zhangsan',sex:'男'},menthods:{//配置回调方法showInfo1(event){console.log(event.target.innerText);console.log(this==vm);//结果为true，这里的this就是vmalert('同学你好');},showInfo2(number,a){console.log(number);console.log(this==vm);//结果为true，这里的this就是vmalert('同学你好');}}}；</script>

事件的基本使用：

使用v-on:xxx或者 @xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象里，最终会在vm上；
method配置的函数不要用箭头函数，否则this就不是vm了；
methods所配置的函数都是被vue所管理的函数，this的指向是vm或组件实例对象；
@click=‘demo’和和@click='demo($event)'效果一致，但后者可以传参。

当需要阻止事件的默认行为时，可以使用@click.prevent="xxx"来代替，比如想要阻止如下a标签的超链接跳转，可以使用。

<div id="root"><h2>事件处理，hello，{{name}}</hr><a herf="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>
</div>
<script type="text/javascript">
const vm= new vue{el:'#root',data:{name:'zhangsan',sex:'男'},menthods:{//配置回调方法showInfo1(event){          event.preventDefault();//同样可以阻止超链接跳转事件，与@click.prevent效果相同。alert('同学你好');}}    
}；</script>

prevent为事件修饰符，vue的事件修饰符包括：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才出触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

事件冒泡：

<body>
<div id="root"><h2>事件处理，hello，{{name}}</hr><a herf="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</botton></div>
</div>
</body>
<script type="text/javascript">
const vm= new vue{el:'#root',data:{name:'zhangsan',sex:'男'},menthods:{//配置回调方法showInfo(event){          //event.stopPropagation();//同样可以阻止按钮点击之后div冒泡事件，与@click.stop效果相同。alert('同学你好');}}    
}；</script>

同理，还有@click.once等，冒泡是由内而外的，是先捕获外层，再执行内层，再冒泡到外层执行，因此先执行内层再执行外层，当需要先执行内层时，就需要在外层使用@click.capture了。

键盘事件：