JavaScript 事件冒泡和捕获模式
捕获模式
1，addEventListener 的第三个参数 useCapture 为 true 则为捕获模式
2，点击 C 时事件触发顺序为 A -> B -> C
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
background: lightblue;
padding: 50px;
}
.b {
background: lightgray;
padding: 50px;
}
.c {
background: lightyellow;
padding: 50px;
}
</style>
</head>
<body>
<div class="a">
A
<div class="b">
B
<div class="c">
C
</div>
</div>
</div>
</body>
<script>
var a = document.querySelector('.a')
var b = document.querySelector('.b')
var c = document.querySelector('.c')
a.addEventListener('click', function(event){
console.log('capture click a')
}, true)
b.addEventListener('click', function(event){
console.log('capture click b')
}, true)
c.addEventListener('click', function(event){
console.log('capture click c')
}, true)
</script>
</html>
冒泡模式
1，不填写 addEventListener 的第三个参数为冒泡模式
2，点击 C 时事件触发顺序为 C -> B -> A
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
background: lightblue;
padding: 50px;
}
.b {
background: lightgray;
padding: 50px;
}
.c {
background: lightyellow;
padding: 50px;
}
</style>
</head>
<body>
<div class="a">
A
<div class="b">
B
<div class="c">
C
</div>
</div>
</div>
</body>
<script>
var a = document.querySelector('.a')
var b = document.querySelector('.b')
var c = document.querySelector('.c')
a.addEventListener('click', function(event){
console.log('Bubble click a')
})
b.addEventListener('click', function(event){
console.log('Bubble click b')
})
c.addEventListener('click', function(event){
console.log('Bubble click c')
})
</script>
</html>
取消冒泡
// 取消冒泡
event.cancelBubble = true1，取消冒泡后事件就不会往上层传递
2，这时只有监听 C 的事件被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
background: lightblue;
padding: 50px;
}
.b {
background: lightgray;
padding: 50px;
}
.c {
background: lightyellow;
padding: 50px;
}
</style>
</head>
<body>
<div class="a">
A
<div class="b">
B
<div class="c">
C
</div>
</div>
</div>
</body>
<script>
var a = document.querySelector('.a')
var b = document.querySelector('.b')
var c = document.querySelector('.c')
a.addEventListener('click', function(event){
console.log('Bubble click a')
})
b.addEventListener('click', function(event){
console.log('Bubble click b')
})
c.addEventListener('click', function(event){
console.log('Bubble click c')
event.cancelBubble = true
})
</script>
</html>
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
