事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
DOM事件流
DOM事件流分为三个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
注意
- JS 代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕
获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理
程序。 - 实际开发中很少使用事件捕获,而是更关注事件冒泡。
举个例子:
<div class="father">
<div class="son"></div>
</div>
let son = document.querySelector('.son');
let father = document.querySelector('.father');
son.addEventListener('click',function(){
console.log('son');
},false);
father.addEventListener('click',function(){
console.log('father');
},false);
由于addEventListener函数的第三个参数是false,因此在事件冒泡阶段才调用事件处理程序,因此当点击son盒子时,
出现了以下结果
使用stopPropagation() 来阻止时间冒泡
son.addEventListener('click',function(e){
console.log('son');
e.stopPropagation();
},false);
将son的事件监听函数改为上述,即可阻止事件冒泡,原理就是事件对象使用了stopPropagation() 函数