码迷,mamicode.com
首页 > Web开发 > 详细

JS事件冒泡机制以及委托方法,以及vue中的stop

时间:2019-09-10 13:08:24      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:ror   兼容   情况   页面   strong   vue   focus   one   error   

要理解事件冒泡机制,就得先了解事件。

浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作。我们较为熟悉的事件有三大类型:鼠标键盘事件、页面事件、表单相关事件。

鼠标键盘事件:onclick、ondbclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup;

页面事件:onload、onunload、onresize、onerror、onabort;

表单相关事件:onblur、onchange、onfocus、onreset、onsubmit。

需要注意的是事件处理程序中的变量event保留着事件对象的信息,包括比如click事件,事件属性里有点击位置相对于浏览器,以及页面的坐标信息,事件的类型(click),触发事件的DOM节点信息等。

什么是事件冒泡?

DOM中,树状结构决定了子元素肯定在父元素里,所以点击子元素,就同时点击了子元素和父元素,以及父元素的父元素,以此类推,当然最终的根节点都是文档,以及window。

试想,当一个子元素被点击的时候,不仅仅这个元素本身被点击了,因为这个元素也在其上一级父元素中(属于父级元素的地盘),所以相当于其父元素也被点击了,以此类推,一层一层往外推,最终整个文档也是被点击了,如果每个层级的节点元素都绑定了click事件,那么每个节点的click事件函数都会被执行。举个形象的例子,一个村里的人被打了(click),首先就要按照村里的规矩处理,同时这个村属于某个乡镇,当然也是相当于这个乡镇的人被打了,那么也要按照这个乡镇的规矩处理,以此一层一层往上报。这个例子不准确的地方就是,现实中一个人因为一个事件只会被处理一次,不会因为同一件事情多次处理。

冒泡带来的烦恼

当上层(以及上上层,直至body元素)父级有子元素同样的方法,但你子元素的事件后,所有父级元素的同名函数也会从下到上,由里往外,挨个执行,但是大多数情况下,我们只希望子当事元素事件执行,不希望层层执行,这就要想办法阻止这种冒泡的情况发生。比如我们点击Child Span的时候只显示 Child Span的内容。结合刚刚的例子就是,村里发生了打人事件,在村里解决了,就没必要一层一层往上报,在层层处理了。

阻止事件冒泡的方法:

1 阻止事件继续往上层传递的过程

  利用事件的stopPropagation()函数终止往父级元素冒泡的过程。

注意 该方法具有兼容性的问题,Event.stopPropagation()在支持W3C的浏览器中使用没有问题,但是在IE浏览器就失效了,在IE中使用 Event.cancelBubble=true来代替:

if (Event.stopPropagation){

Event.stopPropagation(); }else{

Event.cancelBubble=true;

}

注:而在vue中,则通过.stop阻止,例如:<div @click.stop=‘click1‘></div>

2 通过事件委托,不阻止冒泡过程,但是让事件在冒泡到指定节点时再触发,不再是层层触发

  

这种方法同样不阻止事件的冒泡过程,同时也不在冒泡过程的各元素执行方法上添加判断,而是在冒泡过程中的某个父节点,对其所有下属的节点事件进行判断,然后执行相应的操作。

注意这个冒泡过程的最终节点,不一定要到body,到文档,到window,可以是冒泡过程中的任一一个终止冒泡的节点,所以我们可以在这个节点上,对其所有子元素的冒泡事件进行判断和处理。

这种元素本身触发事件,但是事件执行的方法不在元素本身,而是在其父元素的某个节点上,这种“模式叫做事件委托

JS事件冒泡机制以及委托方法,以及vue中的stop

标签:ror   兼容   情况   页面   strong   vue   focus   one   error   

原文地址:https://www.cnblogs.com/webwangjie/p/11496660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!