JavaScript - 事件冒泡&事件捕获

125 阅读3分钟

这是我参与11月更文挑战的第25天,活动详情查看:2021最后一次更文挑战

什么是事件?

事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是 javascript 应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中 web 页面进行某些类型的交互时,事件就发生了。

事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是 web 浏览器中发生的事情,比如说某个 web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

什么是事件流?

事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE 的事件流是事件冒泡流(event bubbling), 而 Netscape 的事件流是事件捕获流(event capturing)。

事件冒泡和事件捕获的概念

事件冒泡和事件捕获是描述事件触发事件时序问题的术语,事件捕获指的是从 document 到触发事件的那个节点,也就是说自上而下的去触发事件,相反的, 事件冒泡是自下而上的去触发事件,绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获,true 为事件捕获,false 为事件冒泡, jQuery 的e.stopPropagation   会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

事件冒泡

IE 提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点

<p>
    <button>click<button/>
<p/>

执行顺序:  p=>button=>div=>body 正如上面我们所说的,它会从一个最具体的的元素接收,然后逐级向上传播, p=>button=>div=>body 事件冒泡可以形象地比喻为把一颗石头投入水中, 泡泡会一直从水底冒出水面,也就是说从小到大开始传播。

事件捕获

网景公司提出的事件流叫事件捕获流。

事件捕获流的思想是不太具体的 DOM 节点应该更早接收到事件,而最具体的节点应该最后接收到事件,针对上面同样的例子,点击按钮,那么此时 click 事件会按照这样传播:(下面我们就借用 addEventListener 的第三个参数来模拟事件捕获流),也就是上面的例子就会倒过来。

正如我们看到的,和冒泡流万全相反,从最不具体的元素接收到最具体的元素接收事件 body=>div=>button=>p

原创不易,转载注明出处