1.概念
冒泡事件:事件由子元素传递到父元素的过程叫做冒泡(false)。
捕获事件:事件由父元素传递到子元素的过程叫做事件捕获(ture)。
所谓DOM事件流,指的是这三个阶段:事件捕获 ➔ 目标事件 ➔ 事件冒泡。
2.addEventListener方法
element.addEventListener(event, function, useCapture)
第一个参数是要绑定的事件,第二个参数是事件要执行的函数,第三个参数默认是false,代表在冒泡阶段(false)还是捕获阶段(true)处理要执行的函数。
3.例子
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5"></div>
</div>
</div>
</div>
</div>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");
box1.addEventListener("click",function () {
console.log("box1");
}, true);
box2.addEventListener("click",function () {
console.log("box2");
}, false);
box3.addEventListener("click",function () {
console.log("box3");
}, true);
box4.addEventListener("click",function () {
console.log("box4");
}, false);
box5.addEventListener("click",function () {
console.log("box5");
}, true);
</script>
</body>
点击box5,打印顺序为:box1,box3,box5, box4, box2
解析:事件捕获 ➔ 目标事件 ➔ 事件冒泡
1.box1,发现是捕获事件,执行输出box1
2.box2,发现是冒泡事件,先不执行,等到事件冒泡阶段再执行
3.box3,发现是捕获事件,执行输出box3
4.box4,发现是冒泡事件,先不执行,等到事件冒泡阶段再执行
5.box5,到达目标事件,执行输出box5
6.box4,发现是冒泡事件,执行输出box4
7.box3,发现是捕获事件,不执行
8.box2,发现是冒泡事件,执行输出box2
9.box1,发现是捕获事件,不执行
点击box3,打印顺序为 box1,box3,box2
一样的解析过程从box1 ➔ box2 ➔ box3(目标事件) ➔ box2 ➔ box1
4.阻止冒泡
event.stopPropagation();
box4.addEventListener("click",function () {
event.stopPropagation()
console.log("box4");
}, false);
这里我们不给box5加而是给box4添加event.stopPropagation();那么点击box5会发生什么呢
打印顺序为box1,box3,box5, box4
在box4那阻止了继续向上传播