理解vue事件修饰符

原创 lingwer111 随笔 vue 401阅读 2017-05-26 23:46:05 举报

vue提供了5个事件修饰符
.stop
.prevent
.capture
.self
.once
官方是这样描述其用法的,不是很详细。
html 代码

stop###
.stop是阻止事件冒泡,要彻底理解,那现在要回忆一下事件冒泡,下面是我理解的事件
现在有这样一个结构的页面

理解vue事件修饰符
当我们点击div.son这个模块时,就会向上产生一个传递
document ← html ← body ← div.parent ← div.son。
如果过程中凡是绑定了点击事件的元素,都会被触发。会一直传递到document为止。这个向上传递的过程就叫做冒泡
如果我在div.parent绑定一个点击事件,这样点击其子元素div.son向上冒泡时,就会被div.parent的点击事件响应。代码如下
html 代码

点击蓝色的div.son,其父级div#parent被绑定了点击事件。被触发了,点击事件的效果是把div#parent的背景颜色从黄色变成红色。
冒泡事件的作用:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),在例子中的体现是,假如我想点击div#parent(包括点击他的子元素div.son),就改变div#parent的字体颜色(包括子元素也跟着改变)。如果没有冒泡事件。那要给div#parent和他的每个子元素都绑定点击事件,子元素很多的情况下这是庞大的开销、冒泡事件避免了这样的事情发生

阻止冒泡

如果点击div.son不想让他冒泡触发父元素的点击事件,原生的event.stopPropagation()可以做到
html 代码

第一个div.son阻止了冒泡,点击除了第一个div.son意外的任意div#parent区域,触发了div#parent的点击事件,字体变成红色。
vue的.stop事件修饰符
html 代码

效果和上一段代码一样,在第一个div.son处设置了.stop事件修饰符,不会向上冒泡触发父元素的点击事件。

.self

.self 只当事件在该元素本身(而不是子元素)触发时触发回调,可以和上一个stop进行对比,在div#parent标签设置.self修饰符,点击他的子元素不会触发绑定的事件。只有他自身能触发
html 代码

.prevent

.prevent 阻止元素的默认行为
什么是默认行为,比如点击超链接a标签会转跳到href的地址或者相关锚点。
原生的event.preventDefault()可以阻止元素的默认行为
html 代码

vue的.prevent
html 代码

要注意的是要new Vue,并把el绑定给a标签,才能使用prevent修饰符阻止默认行为

.capture

参考自什么是vuejs v-on的capture模式
.capture 添加事件侦听器时使用事件捕获模式
要知道捕获模式,就要了解JavaScript 的event事件操作机制
[backcolor=#f2f2f2]element.addEventListener(<event-name>, <callback>, <use-capture>);[/bgcolor]
表示在 element 这个对象上面添加一个事件监听器,当监听到有 <event-name> 事件发生的时候,调用 <callback> 这个回调函数。 <use-capture> 这个参数,表示该事件监听是在“捕获”阶段中监听(设置为 true)还是在“冒泡”阶段中监听(设置为 false)。

第三个参数就是我想要的答案。

在Vue.js中,我们用修饰符来达到事件监听是捕获还是冒泡阶段中监听的效果。

看个例子,这会很好帮助我们理解冒泡和捕获在dom结构中如何过渡的。
默认的冒泡监听事件
html 代码

下面是使用了capture修饰符的捕获例子

html 代码

至于once。<!-- 点击事件将只会触发一次 --> 很好理解,不用解释了,但我猜测作者用了设计模式中的单例模式来实现的这一效果
html 代码

代码中render()被调用了3次,使用单例模式后,只会弹出一个框框。
在getSingle中的返回一个闭包,闭包中引用了包含作用域变量result,第一次传入的函数将赋值给这个result,每次调用的时候判断result是否存在,存在就直接返回result,达到只执行一次的目的。这就是单例模式,核心就是利用闭包。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复