DOM中事件有三个阶段,分别为
1.事件冒泡阶段:当嵌套的元素注册相同的事件时,里面得元素触发了事件,外面的元素的事件也触发了。即执行顺序是从内向外。
2.事件处于目标阶段
3.事件捕获阶段:当嵌套的元素注册相同的事件时,里面得元素触发了事件,外面的元素的事件也触发了。但执行顺序是从外向内。
其中:事件冒泡阶段和时间捕获阶段可以通过对象.addEventListener函数中的布尔值来定义,布尔值为true时为捕获阶段,布尔值为false时为冒泡阶段。默认为冒泡阶段
冒泡阶段
如下:
此时点击d3,执行顺序是d3,d2,d1。其中的e为事件处理参数对象,e.eventPhase获得的是元素处于哪一个阶段,1为事件捕获阶段,2为事件处于执行阶段,3为事件冒泡阶段
var objs = [document.getElementById("d1"),document.getElementById("d2"),document.getElementById("d3")];
//循环遍历div,foreach函数对数组的每一个元素执行一次提供的函数。提供的函数有三个参数,1.数组中正在处理的当前的元素
//2.数组中正在处理的当前元素的索引,3.foreach()正在处理的数组
objs.forEach(function(element){
element.addEventListener("click",function(){
console.log(this.id+"---"+e.eventPhase);
},false);
});
执行结果:点击最里面的盒子时
捕获阶段
如下:
此时点击d3,执行顺序是d1,d2,d3。
var objs = [document.getElementById("d1"),document.getElementById("d2"),document.getElementById("d3")];
//循环遍历div,foreach函数对数组的每一个元素执行一次提供的函数。提供的函数有三个参数,1.数组中正在处理的当前的元素
//2.数组中正在处理的当前元素的索引,3.foreach()正在处理的数组
objs.forEach(function(element){
element.addEventListener("click",function(e){
console.log(this.id+"---"+e.eventPhase);
},true);
});
执行结果:点击最里面的盒子时
阻止事件冒泡
方法有两种:
- 事假处理参数对象.stopPropagation();这个是火狐的标准,火狐和谷歌支持
- window.event.cancleBubble = true;这个是IE的标准,IE和谷歌支持。window.evente等价于事假处理参数对象
document.getElementById("d1").onclick = function(){
console.log(this.id);
}
//这里的e为事件处理参数对象
document.getElementById("d2").onclick = function(e){
console.log(this.id);
//阻止到这一层,即点击d3会出发到d2
//window.event.cancelBubble = true; //IE的标准
e.stopPropagation();//火狐的标准
}
document.getElementById("d3").onclick = function(){
console.log(this.id);
}