文章目录
事件对象.eventPhase属性可以查看事件触发时所处的阶段
- 事件捕获阶段 : 从外向内
- 事件目标阶段 : 最开始选择的那个
- 事件冒泡阶段 : 从里向外
为元素绑定事件
addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的)
addEventListener中第三个参数是控制事件阶段的，相关介绍
https://blog.51cto.com/yang/2899985
事件的阶段属性值:
通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
如果这个属性的值是:
- 1---->捕获阶段
- 2---->目标阶段
- 3---->冒泡
测试
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script>
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//事件冒泡:是从里向外
//同时注册点击事件
var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) {
console.log(this.id+"====>"+e.eventPhase);
}, true);
});
//该属性在事件参数对象中存在
</script>
</body>
</html>
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向内
阻止事件冒泡的方式window.event.cancelBubble=true; IE特有的（标准中已废弃）,谷歌支持,火狐不支持
（ window.event就是一个对象,是IE中的标准 ）
e.stopPropagation(); 谷歌和火狐支持
window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准（ 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替）
冒泡显示测试
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1{
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: green;
}
#dv3{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script>
//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("dv1").onclick=function () {
console.log(this.id);
};
my$("dv2").onclick=function () {
console.log(this.id);
};
//事件处理参数对象
my$("dv3").onclick=function (e) {
console.log(this.id);
//阻止事件冒泡
//e.stopPropagation();
console.log(e);
};
document.body.onclick=function () {
console.log("你们这些标签触发事件我都冒泡");
};
</script>
</body>
</html>
