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

前端  /  管理员 发布于 6年前   336

要理解事件冒泡机制，就得先了解事件。浏览器是事件驱动型的，根据用户的行为触发不同的事件，根据事件执行相应的操作。我们较为熟悉的事件有三大类型：鼠标键盘事件、页面事件、表单相关事件。

鼠标键盘事件：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，可以是冒泡过程中的任一一个终止冒泡的节点，所以我们可以在这个节点上，对其所有子元素的冒泡事件进行判断和处理。

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