Vue2.0笔记——事件对象，事件冒泡及默认行为

Posted 2020-10-31

事件对象

关于事件即v-on在指令中已经介绍过，@简写也说过,就不再说明如何声明使用了。
我们可以在调用事件方法是为方法添加参数 $event,表示一个事件实例。
在处理方法中，得到这个实参，可通过这个对象获得一些方法和作用。

<div id="app">
    <button @click="clickPrint($event,‘你好‘)">点击，事件对象</button>
</div>

methods:{
            clickPrint(e,str){
                console.log(str);
                console.log(e);
                console.log(e.type);
                console.log(e.target);//获得事件的目标对象DOM
            }
}

如果有多个参数，那么将$event设置为第一个参数。

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，如何阻止事件冒泡，在js中是通过stopPropagation()方法来阻止事件冒泡的。

<div id="app">
        <div @click="printD()">
            <p @click="printP()">
                <button @click="clickPrint($event,‘你好‘)">点击，事件对象</button>
            </p>
        </div>
    </div>

此时将会出现向上冒泡情况。
只需在触发事件的指令后添加修饰符.stop

<button @click.stop="clickPrint($event,‘你好‘)">点击，事件对象</button>

默认行为

阻止默认行为，在js中调用event.preventDefault(),在Vue中，添加修饰符.prevent

<a href="http://www.baidu.com" target="_blank" @click.stop="study">链接</a>

此时添加.stop将不会链接到百度的主页面。
当然也可以通过串联的方式

<a href="http://www.baidu.com" target="_blank" @click.stop.prevent="study">链接</a>

还有，如：.once，只触发一次事件

<button v-on:click.once="clickOnce()">该事件只触发一次</button>

还有其他修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  更多，需要查看官网v-on