手机怎么创网站免费下载,seo的优化技巧有哪些,小学学校网站,wordpress时区设置文章目录 前文提要事件修饰符prevent#xff08;常用#xff09;stop#xff08;不常用#xff09;事件冒泡stop使用方法三层嵌套下的stop三层嵌套看出的stop#xff1a; once#xff08;常用#xff09;capture#xff08;不常用#xff09;self#xff08;不常用常用stop不常用事件冒泡stop使用方法三层嵌套下的stop三层嵌套看出的stop once常用capture不常用self不常用思考点事件是否被阻止传播 passive不常用修饰符叠加 前文提要
本人仅做个人学习记录如有错误请多包涵
参考链接面试官Vue常用的修饰符有哪些有什么应用场景 事件修饰符
在前文提到了“事件处理”后我们可以为标签绑定事件事件也存在着六种修饰符称为事件修饰符。 它们分别是prevent、stop、once、capture、self、passive这些标签具有不同的功能可以为事件 叠加事件修饰符使用。 前三个常用后三个了解就好。
prevent常用
prevent可以阻止标签的默认行为例如
a hrefhttp://www.baidu.com超链接/a当你点击上面代码呈现的超链接的时候回跳转到百度的首页。 但是当你为这个绑定鼠标点击事件并且添加prevent修饰符的时候回调函数不一定要添加则会阻止这个默认行为。也就是点击过后什么都不会发生如果添加了回调函数则响应回调函数但仍然不会跳转。
a hrefhttp://www.baidu.com click.prevent超链接/astop不常用
事件冒泡
stop修饰符用来阻止事件冒泡事件冒泡是从内向外的。 当一个标签被另一个标签包含的时候二者都有着相同的触发事件例如鼠标点击当你触发内部的标签的时候也会触发外部标签的事件从而触发多遍。
Vue存在两个阶段捕获阶段和冒泡阶段先捕获阶段从外向内事件传递后冒泡阶段从内向外。 默认在冒泡阶段处理事件从而判断是否触发事件触发回调函数所以 回调函数的触发顺序默认也是由内向外的。
样例代码
在这里插入代码片bodydiv idbox clickshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxbutton clickshowInfo2 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo1() {console.log(1)},showInfo2() {console.log(2)}}})/script
/body呈现效果如下 当你点击div标签区域的时候会触发鼠标点击事件从而调用函数showInfo1控制台输出1 但是当你点击div标签内部的按钮时效果则不一样。 控制台先输出2后输出1。 可以看出内部按钮先触发事件外部的div标签后触发事件这就是事件冒泡你可以想象一个气泡从下部跑到上部就是事件从内部到外部传递回调函数从内向外顺序触发。。
stop使用方法
修改代码改成下述样式其余不变 div idbox clickshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxbutton click.stopshowInfo2 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/div则不会触发事件冒泡这是两层的情况在内部那层书写stop从而阻止事件冒泡。
三层嵌套下的stop
bodydiv idbox clickshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxh1 clickshowInfo2 stylebackground-color:rgb(255, 0, 0)button click.stopshowInfo3 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/h1/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo1() {console.log(1)},showInfo2() {console.log(2)},showInfo3() {console.log(3)}}})/script
/body三层中最里面的标签中加入了stop事件修饰符其余两层没有。 呈现效果如下 当你点击按钮的时候呈现效果如下 事件冒泡在添加了stop修饰符的这层直接被阻止后面两层根本不会事件冒泡。
当你点击第二层的h1标签也就是红色那层没添加stop的时候呈现效果如下 点击中间第二层没添加过stop修饰符后面两层仍然可以触发事件冒泡最里面那层的stop修饰符并不能管到整个嵌套的结构。
再次修改代码其余部分不变 div idbox clickshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxh1 click.stopshowInfo2 stylebackground-color:rgb(255, 0, 0)button clickshowInfo3 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/h1/div三层嵌套中只在中间的第二层添加stop事件修饰符最里层和最外层不添加stop。 点击按钮呈现效果如下 嘴里 最里层触发的事件会冒泡到第二层触发事件后才被阻止继续冒泡。 如果点击中间的h1标签层呈现效果如下 点击中间层触发事件事件则会直接在这层被阻止不会继续事件冒泡不会到第三层。
三层嵌套看出的stop
stop修饰符仅能阻止事件在当前标签触发后不会继续冒泡传播。 不会管前一层触发的事件如何传播也不会管触发在这层之外的嵌套层触发的事件会不会接着冒泡。
once常用
once能够让事件仅能够触发一次。 如果代码写成这样
bodydiv idboxbutton clickshowInfo点我触发事件/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo() {console.log(1)}}})/script
/body那么可以点击按钮多次从而多次触发鼠标点击事件在控制台输出多个1。 但是如果修改这里代码中的部分添加once修饰符改成下面这样
button click.onceshowInfo点我触发事件/button则无论如何点击这个按钮右侧控制台永远只会输出一次1这意味着事件永远只会被触发一次
capture不常用
前文提到过事件在冒泡阶段处理因此回调函数是从内向外触发的那么capture则是让事件在捕捉模式处理回调函数从外向内触发。 当你的代码写成下面这样
点击外层的div标签的时候呈现效果如下
bodydiv idbox click.captureshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxbutton click.captureshowInfo2 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo1() {console.log(1)},showInfo2() {console.log(2)}}})/script
/body点击div标签对应的范围 只出现了1说明只触发了div对应的回调函数说明事件并不会从外层传到内层。 点击按钮 先出现1后出现2有两个数事件触发两次回调函数从外向内被调用。
self不常用
self会要求事件触发者是自己的时候才允许回调函数的执行也可以用来阻止事件冒泡阻止得不完全。 代码写成这样其余保持不变
div idbox click.selfshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxbutton clickshowInfo2 stylebackground-color:rgb(0, 255, 13)点我触发事件/button
/div点击按钮 只有按钮对应的回调函数被触发了并没有触发div标签的回调函数。 点击div标签 当触发事件的是自己的时候div标签对应的回调函数才能被执行。
event.target在传递的过程中是不变的因此可以使用这个查看事件的触发者
思考点事件是否被阻止传播
在stop修饰符中如果三层的标签中间有一个stop最内层的事件传递到中间这层触发事件之后就无法继续传播了那么self是吗 修改代码如下
bodydiv idbox clickshowInfo1 stylebackground-color:rgb(208, 255, 0);height:50pxh1 click.selfshowInfo2 stylebackground-color:rgb(255, 0, 0)button clickshowInfo3 stylebackground-color:rgb(0, 255, 13)点我触发事件/button/h1/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo1() {console.log(1)},showInfo2() {console.log(2)},showInfo3() {console.log(3)}}})/script
/body在中间层添加self修饰符其余两层没有修饰符。 点击最内层的按钮 你会发现最内层和最外层的鼠标点击事件对应的回调函数全被触发了说明self修饰符并不会阻止事件的传播它只会阻止回调函数的调用因为鼠标点击事件的触发者是内部的按钮并不是带有self修饰符的h1标签
passive不常用
passive会使标签的默认行为立即执行默认行为一般会在触发事件的回调函数处理完之后执行如果回调函数需要处理很久很久默认行为则会因此延迟造成使用上的不便。
bodydiv idbox a hrefhttp://www.baidu.com clickshowInfo超链接/a/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {showInfo() {for (var i 0; i 10000; i){console.log(1)}}}})/script
/body我使用的chrome浏览器会在计数到四千的时候再跳转到百度的官网具备一定的延迟数值越大的时候延迟越明显。 如果为超链接中增加passive修饰符如下其余不变
a hrefhttp://www.baidu.com click.passiveshowInfo超链接/a则会在你点击超链接的时候马上跳转到百度的官网地址。
修饰符叠加
a hrefhttp://www.baidu.com click.prevent.stop超链接/a这样a标签既不会跳转也会阻止事件冒泡如果代码写成这样
a hrefhttp://www.baidu.com click.stop.prevent超链接/a也是可以的二者是等价的。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
