VUE事件修饰符.passive、.capture、.once实现原理——重新认识addEventListener方法

Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点 (.) 表示的指令后缀来调用修饰符. .stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面

事件修饰符:stop  阻止冒泡 prevent  阻止默认事件 capture  添加事件侦听器时使用事件捕获模式 self  只当时间在该元素本身(比如不是子元素)触发时触发回调 once  事件只触发一次 --------------------------------------------------------- sopt: 如果没有没有设置阻止冒泡事件,子元素就会向父元素产生冒泡事件 添加stop后 prevent: 首先我们一个a标签添加跳转链接跳至百度 没添加prevent前

1.修饰符种类 .stop .prevent .capture .self .once .passive 2.self修饰符说明 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.

.stop 使用该修饰符可以停止事件冒泡 .prevent 使用该修饰符可以阻止表单提交时的页面刷新等浏览器默认行为 .capture 如果含有嵌套结构,且使用了该修饰符,那么事件函数执行顺序是:先执行 由外到内 含有该修饰符的事件(没有被直接或间接触发的除外),再冒泡触发 .self 只能直接触发,子事件冒泡不会触发,但本身还是会冒泡触发父元素的事件 .once 事件函数只调用一次 .passive 提升页面滚动顺滑度 https://blog.csdn.net/dj0379/article/

<div id="ON" v-on:click="handle0"> <p v-text="num"></p> @*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@ <input id="Button1" v-on:click.stop="handle" type="button&qu

//html <div id="app"> <div @click="divHandler" style="height:150px,background-color:darkcyan"> <input type="button" value="点击" @click="btnHandler"> </div> <a href="

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <but

一.v-model.lazy 只有在input输入框发生一个blur时才触发 v-model绑定的变量正常输入的时候会同步更新,加上lazy时只在失去焦点时更新绑定的变量. 二.v-model.trim 将用户输入的前后的空格去掉 三.v-model.number 将用户输入的字符串转换成number 我们在获取用户输入的数字时取到的是字符串类型,使用number可以取到数值类型. 四.@click.once点击事件只会触发一次 五.@click.stop点击子节点不会捕获到父节点的事件,以下例