在dom传播的过程中,一个事件有触发到响应,经历了三个过程:
1,目标的挖洞过程,先有html标签触发事件,然后向子标签一层一层传播,但未执行,,直到找到事件目标为止,这个过程叫做挖洞过程,
2,目标阶段,即获取目标阶段。
3,冒泡阶段,事件目标响应事件,并调用事件函数,然后一层一层向父标签传递事件响应,直到html根标签结束为止。这个过程叫冒泡过程。
事件函数是在冒泡过程中调用的,可以通过addeventlistener设置第三个参数为true,改为挖洞过程调用。 对于事件传播流程中的标签来说,挖洞总是在冒泡之前执行,对于最底层的事件目标也是如此,但火狐不这么认为,在火狐中,对于事件目标,挖洞函数和冒泡函数谁先绑定谁先执行。var a = document.querySelector('a')
// 需求,div中有一个a标签,点击div背景变蓝,点击a背景变红
a.addEventListener('click', function (e) { e.preventDefault() // 阻止默认行为 body.style.backgroundColor = 'red' // 阻止a标签的事件传播 不会阻止a自身的冒泡 // e.stopPropagation() // 阻止a标签的事件传播,会把自身的冒泡阻止 e.stopImmediatePropagation() }, true) // 阻止冒泡是在挖洞过程进行的
div.addEventListener('click', function () {
body.style.backgroundColor = 'blue'
})