事件流 - 事件传播
事件传播的三个阶段: 捕获-1, 目标-2, 冒泡-3
- 事件冒泡: 事件的一种传播方法,根据 DOM 树从下往上传播;
- 事件捕获: 事件的一种传播方法,根据 DOM 树从上往下传播;不支持 IE678;
- 目标: 点击的事件所属的事件源;
addEventListener('click', () => {}, true/false)
第三个参数控制冒泡 / 捕获,true:捕获; 不写默认 false:冒泡;
<div class="box">
<p class="child"></p>
</div>
复制代码
.box {
width: 300px;
height: 300px;
margin: 200px;
cursor: pointer;
border: 1px solid #ccc;
background-color: skyblue;
}
.child {
width: 100px;
height: 100px;
margin: 100px;
cursor: move;
border: 1px solid #ccc;
background-color: lightgreen;
}
复制代码
let box1 = document.querySelector('.box')
let box2 = document.querySelector('.child')
复制代码
冒泡
document.addEventListener('click', () => {
console.log('您点击了 document');
})
box1.addEventListener('click', () => {
console.log('您点击了 box1');
// 您点击了 box1
// 您点击了 document
})
box2.addEventListener('click', () => {
console.log('您点击了 box2');
// 您点击了 box2
// 您点击了 box1
// 您点击了 document
})
复制代码
判断阶段 (捕获-1,目标-2,冒泡-3)
document.addEventListener('click', (event) => {
console.log('document:' + event.eventPhase);
}, true)
box1.addEventListener('click', (event) => {
console.log('box1:' + event.eventPhase);
})
box2.addEventListener('click', (event) => {
console.log('box2:' + event.eventPhase);
// document:1 捕获
// box2:2 目标
// box1:3 冒泡
})
复制代码
事件引发者
document.addEventListener('click', (event) => {
console.log('document:' + event.target.tagName);
}, true)
// document:BODY
box1.addEventListener('click', (event) => {
// console.log('box1:' + event.target.tagName);
}, true)
// document:DIV
box2.addEventListener('click', (event) => {
// console.log('box2:' + event.target.tagName);
}, true)
// document:P
复制代码
阻止冒泡
- event.stopPropagation() // 正常浏览器
- event.cancelBubble = true // IE678
document.addEventListener("click",function(){
console.log("您点击了document");
});
box1.addEventListener("click",function(){
console.log("您点击了box1");
});
box2.addEventListener("click",function(event){
var event = event || window.event;
console.log("您点击了box2");
// 阻止冒泡
if(event.stopPropagation) {
event.stopPropagation(); // 正常浏览器
}else {
event.cancelBubble = true; // ie678
}
});
复制代码