js事件机制
js事件的发生包括捕获和冒泡两个阶段
捕获:从最外边元素节点传递至发生事件的元素节点,即由外到内;
冒泡:从发生事件的元素节点传递至最外边元素节点,即由内到外;
js事件是先捕获阶段到冒泡阶段,即从最外层依次到发生事件的元素节点,再由发生事件的元素节点到最外面元素节点。但由于IE8及其低版本不支持捕获事件,所以现在很多事件都是在冒泡中进行事件处理的。
举个例子来说
<div class="box1">
box1
<div class="box2">
box2
<div class="box3">box3</div>
</div>
</div>
.box1{
width:300px;
height:300px;
background:#ccc;
position:absolute;
}
.box2{
width:200px;
height:200px;
background:skyblue;
position:absolute;
top:50px;
left:50px;
}
.box3{
width:100px;
height:100px;
background:blanchedalmond;
position:absolute;
top:50px;
left:50px;
}
let box = document.getElementsByTagName("div");
let box1 = box[0];
let box2 = box[1];
let box3 = box[2];
box1.onclick=function(){
console.log("box1被点击了。。。");
};
box2.onclick=function(){
console.log("box2被点击了。。。");
};
box3.onclick=function(){
console.log("box3被点击了。。。");
};
浏览器展示
控制台输出结果
1. 捕获阶段
如上面的例子,在.box3被点击的时候,js 会从文档的最上层开始,由外向内寻找点击事件的起源,也就是 .box3。那么这个由外向内的过程就是 .box1 --> .box2 --> .box3,这三个 div 的 click 事件按照这个过程依次被触发。
这个触发的方向就是捕获的方向。
2. 冒泡阶段
在找到被点击的 .box3 之后,事件向上传递,过程是 .box3 --> .box2 --> .box1,此时依次触发.box3、.box2、.box1 的 click 事件,这个由内向外的触发过程就称为冒泡。