事件传播分为冒泡(Bubbling)和捕获(Capturing)两种模式。
冒泡
● 冒泡是指当一个元素上的事件被触发时,该事件会从最内层的元素开始向外层元素逐层传播,直到传播到最外层的祖先元素。
● 举例来说,如果你单击了一个嵌套的元素,首先会触发该元素上的单击事件,然后事件会向上传播至其父元素,再到父元素的父元素,以此类推,直到传播至文档的根节点。
捕获
● 捕获是指事件从最外层的元素向内传播到最内层的元素。
● 在捕获阶段,事件会从文档的根节点一直传播至目标元素。
使用addEventListener方法时,你可以通过第三个参数来设置事件监听器执行的阶段
element.addEventListener('click', myFunction, true); // 在捕获阶段触发事件
element.addEventListener('click', myFunction, false); // 在冒泡阶段触发事件(默认值)