事件流
Dom事件流将事件分为三个阶段:捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数,再调用目标阶段的处理函数,最后调用冒泡阶段的处理函数。
举例
<div id="boxA"> <div id="boxB"> <div id="boxC"></div> </div> </div> <script> var a = document.getElementById('boxA'); var b = document.getElementById('boxB'); var c = document.getElementById('boxC'); // 目标对象,冒泡还是捕获无所谓 c.addEventListener('click',function(){console.log('bubbleC')},false) c.addEventListener('click',function(){console.log('captureC')},true) // 事件捕获 a.addEventListener('click',function(){console.log('captureA')},true) b.addEventListener('click',function(){console.log('captureB')},true) // 事件冒泡 a.addEventListener('click',function(){console.log('bubbleA')},false) b.addEventListener('click',function(){console.log('bubbleB')},false) </script>
结论
第三个参数unCapture = false 意味着:将事件处理函数加入到冒泡阶段,在冒泡阶段会被调用;useCapture = true意味着:将事件处理函数加入到捕获阶段,在捕获阶段会被调用。而在触发事件的目标对象上绑定的函数,冒泡还是捕获无所谓,都是在目标阶段被调用的,执行顺序是先注册的先执行。
事件冒泡机制、事件捕获机制
事件捕获和事件冒泡就是事件流的两个过程。
阻止事件冒泡和捕获
通过event.stopPropagation()阻止事件的继续传播。
举例
打印结果:captureA
原因:阻止了事件的继续传播,事件流走到captureA就不往下走了
<div id="boxA"> <div id="boxB"> <div id="boxC"></div> </div> </div> <script> var a = document.getElementById('boxA'); var b = document.getElementById('boxB'); var c = document.getElementById('boxC'); // 目标对象,冒泡还是捕获无所谓 c.addEventListener('click',function(){console.log('bubbleC')},false) c.addEventListener('click',function(){console.log('captureC')},true) // 事件捕获 a.addEventListener('click',function(event){ console.log('captureA'); event.stopPropagation(); // 阻止事件的传播 },true) b.addEventListener('click',function(){console.log('captureB')},true) // 事件冒泡 a.addEventListener('click',function(){console.log('bubbleA')},false) b.addEventListener('click',function(){console.log('bubbleB')},false) </script>