捕獲模式
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>