事件冒泡(event bubbling)和事件捕获(event capturing)是事件传播的两种方法。在早期,网景(Netscape)推崇事件捕获模式,而微软IE浏览器支持事件冒泡模式。如今,IE9+及主流浏览器两种模式都支持。
事件冒泡
事件冒泡模式流程:事件发生时,先触发目标元素(最直接元素)的事件响应函数,然后触发其父元素的事件响应函数,并逐级上溯到祖先元素。
事件捕获
事件捕获模式流程正好与冒泡模式相反,事件发生时,先触发最外层元素(祖先元素)的事件响应函数,逐级向下,直到目标元素。
DOM事件流
事件流的顺序为事件捕获(capturing phase)、目标事件(target phase)、事件冒泡(bubbling phase)。
DOM事件流阻断
DOM事件流可以在经过的任意事件处理函数中终止。无论当前执行的事件响应函数是处于捕获
阶段还是冒泡阶段,通过event.stopPropagation()终止事件流的继续传播。
event.stopPropagation()只是阻止事件传递到下一个元素,并不阻止当前元素上事件响应。