js 中的事件传播流程

捕获阶段、事件源阶段、冒泡阶段 捕获阶段：事件从html的根节点开始传递，直到触发事件的标签结束，此为捕获阶段。 事件源阶段：事件在触发事件的标签上进行传递，传递的时候只和事件添加的先后顺序有关系 冒泡阶段：事件从事件源向html根节点逐层传递，直到html节点结束 先从外往内传播，传播到事件源上，进行平行传播，然后到冒泡阶段（从内往外）。 // 他们的区别,onClick相当于属性赋值，最后一次设置的值会覆盖前面设置的 // addEventListener相当于事件委托监听，可以为标签添加多个事件, 参数三表示是否在捕获阶段触发(默认是false，在冒泡阶段触发。true，表示在捕获阶段触发) onClick和addEventListener('click', function() {}, false) 事件阻止 event.stopImmediatePropagation() //立即停止，会停止整个事件的传播流程，包括在这个事件上的传播流程 event.stopPropagation() //停止，停止后续的传播，在当前标签上的传播会执行完毕

看下面的例子

<style> div { padding: 20px; width: 300px; height: 300px; background-color: greenyellow; } section { padding: 10px; width: 200px; height: 200px; background-color: yellow; } p { padding: 10px; width: 100px; height: 100px; background-color: red; } span { border: 1px solid #ccc; } </style> <div onclick="dHnadle()"> <section onclick="sHnadle()"> <p onclick="pHnadle()"> <span onclick="spanHnadle()"> 文本 </span> </p> </section> </div> var d = document.querySelector('div') var s = document.querySelector('section') var p = document.querySelector('p') var span = document.querySelector('span') function dHnadle() { console.log('div被触发') } function sHnadle() { console.log('section被触发') } function pHnadle() { console.log('p被触发') } function spanHnadle() { console.log('span被触发') } function dHnadle() { console.log('div被触发') } // addEventListener判断是否是在捕获阶段执行，默认是false，即冒泡阶段执行。 true表示捕获阶段 s.addEventListener('click', function() { console.log('section被触发，在冒泡阶段2') }) s.addEventListener( 'click', function() { console.log('section被触发，在冒泡阶段') }, false ) s.addEventListener( 'click', function() { console.log('section被触发 ,在捕获阶段执行') }, true ) // 事件源阶段，跟tue,false无关，只跟书写的先后顺序有关。 span.addEventListener( 'click', function() { console.log('span触发，在冒泡阶段执行') // event.stopImmediatePropagation() //立即停止，会停止整个事件的传播流程，包括在这个事件上的传播流程 // event.stopPropagation() //停止，停止后续的传播，在当前标签上的传播会执行完毕 }, true ) span.addEventListener( 'click', function() { console.log('span触发，在捕获阶段执行') }, false ) </scrpt>

点击span标签，结果显示 stopImmediatePropagation() //立即停止，会停止整个事件的传播流程，包括在这个事件上的传播流程

给span加上阻止事件冒泡 span.addEventListener( 'click', function(event) { console.log('span触发，在冒泡阶段执行') event.stopImmediatePropagation() //立即停止，会停止整个事件的传播流程，包括在这个事件上的传播流程 }, true ) span.addEventListener( 'click', function() { console.log('span触发，在捕获阶段执行') }, false )

结果显示： stopPropagation() //停止，停止后续的传播，在当前标签上的传播会执行完毕

// 事件源阶段，跟tue,false无关，只跟书写的先后顺序有关。 span.addEventListener( 'click', function(event) { console.log('span触发，在冒泡阶段执行') event.stopPropagation() //停止，停止后续的传播，在当前标签上的传播会执行完毕 }, true ) span.addEventListener( 'click', function() { console.log('span触发，在捕获阶段执行') }, false )

结果显示：