css部分
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 400px;
height: 400px;
background: red;
margin: 0 auto;
overflow: hidden;
}
#box2 {
width: 300px;
height: 300px;
background: blue;
margin: 50px auto;
overflow: hidden;
}
#box3 {
width: 200px;
height: 200px;
background: lawngreen;
margin: 50px auto;
overflow: hidden;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
JS部分
默认 false , false 是冒泡, true 是事件捕获
事件捕获
假设在box3内部进行点击，那么：事件捕获认为：你点击box3，因为box1在box3外部，所以，box1先捕获到，然后再传递给box3，所以，事件执行顺序是“box1-box2-box3”，这就像你进去房间，必须先进入大院，再进入门一样。
<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
box1.addEventListener('click', function () {
console.log('点击了box1')
}, true)
box2.addEventListener('click', function () {
console.log('点击了box2')
}, true)
box3.addEventListener('click', function () {
console.log('点击了box3')
}, true)
// true 从外往里 123
</script>
事件冒泡
假设在box3内部进行点击，那么：冒泡事件认为：你点击了box3，而box3在box1里内部，所以，也点击了box1，因此执行顺序是 “box3-box2-box1” ，由内往外一步步向上，这很像水里有一个鱼吐了一个水泡，这个水泡往上飘一样，所以叫做“冒泡事件”
<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
box1.addEventListener('click', function () {
console.log('点击了box1')
}, false)
box2.addEventListener('click', function () {
console.log('点击了box2')
}, false)
box3.addEventListener('click', function () {
console.log('点击了box3')
}, false)
// false 从里往外 321
</script>
网友评论