2021-04-12

什么是冒泡事件与捕获事件

冒泡事件：是指子元素向父元素传递的过程
捕获事件：是指父元素向子元素传递的过程

box2.addEventListener(‘click’, function(){
alert(“box2 被触发了”);
})

box3.addEventListener(‘click’, function(){
alert(“box3 被触发了”);
})

// 点击box3打印结果
// box3
// box2
// box1

// 当我们将 addEventListener 设置为true时，此时就成了事件捕获的过程
box1.addEventListener(‘click’, function(){
alert(“box1 被触发了”);
}, true)

box2.addEventListener(‘click’, function(){
alert(“box2 被触发了”);
}, true)

box3.addEventListener(‘click’, function(){
alert(“box3 被触发了”);
})

// 点击box3打印结果
// box1
// box2
// box3

// 阻止事件冒泡
box1.addEventListener(‘click’, function(){
alert(“box1 被触发了”);
})

box2.addEventListener(‘click’, function(event){
alert(“box2 被触发了”);
event.stopPropagation();
})

box3.addEventListener(‘click’, function(){
alert(“box3 被触发了”);
})

// 点击box3打印结果
// box3
// box2

// 阻止事件捕获
box1.addEventListener(‘click’, function(){
alert(“box1 被触发了”);
}, true)

box2.addEventListener(‘click’, function(event){
alert(“box2 被触发了”);
event.stopPropagation();
}, true)

box3.addEventListener(‘click’, function(){
alert(“box3 被触发了”);
})

// 点击box3打印结果
// box1
// box2