事件阶段

最新推荐文章于 2021-09-10 17:26:22 发布

包淼淼

最新推荐文章于 2021-09-10 17:26:22 发布

阅读量174

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_32849999/article/details/80393857

版权

js 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

common.js

function my$(id) {
return document.getElementById(id);

}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: red;
}
#div2{
width: 250px;
height: 150px;
background-color: green;
}
#div3{
width: 200px;
height: 100px;
background-color: blue;
}

</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">

</div>
</div>
</div>
<script src="common.js"></script>
<script>
/*事件有三个阶段：
1、事件捕获阶段从外向内
2、事件目标阶段最开始显示的那个
3、事件冒泡阶段从里向外

为元素绑定事件
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的);
事件触发的过程中，可能会出现事件冒泡的效果，为了阻止事件冒泡--》
window.event.cancelBubble=true;火狐不支持
window.event就是一个对象，是ie中的标准
e.stopPropagation();阻止事件冒泡。ie8不支持
window.event和e都是事件参数对象一个是ie的标准，一个是火狐的标准
事件参数e在IE8的浏览器中是不存在，此时用window.event来代替

addEventListener的第三个参数是控制事件阶段的
事件的阶段有三个：
通过e.eventPhase这个属性可以知道当前的事件是什么阶段的
如果这个属性的值是：
1 ----事件捕获阶段从外向内
2-----事件目标阶段最开始显示的那个
3------事件冒泡阶段从里向外
一般默认都是冒泡阶段，很少用捕获阶段
* */
//事件冒泡：从里向外
//同时注册点击事件
var objs=[my$("div3"),my$("div2"),my$("div1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
// ele.addEventListener("click",function (e) {
// console.log(this.id+"=====>"+e.eventPhase);
// },false);//div3 div2 div1 冒泡
ele.addEventListener("click",function (e) {
console.log(this.id+"=====>"+e.eventPhase);
},true);//div1 div2 div3 捕获
//console.log(arguments[0],arguments[1],arguments[3]);
});

//该属性在事件参数对象中存在

</script>
</body>
</html>