捕获模式
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 = true
1,取消冒泡后事件就不会往上层传递
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>
本文完~