事件周期
DOM：3个阶段
1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件
2.目标触发:优先触发目标元素绑定的事件处理函数
目标元素:实际点击的元素
3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数
修改事件触发的顺序:
btn.addEventListener("事件名称",函数对象,capture)
其中:capture表示是否在捕获阶段就提前触发
默认false,只在冒泡阶段才触发
改为true,在捕获阶段提前触发 阻止冒泡必须要用到的事件对象:event
事件发生时,自动创建的,封装事件信息的对象
还提供了对事件进行操作的API
如何获得event对象:
按照DOM对象:事件发生时会自动创建event对象
会将event对象作为事件处理函数的第一个参数自动传入
阻止冒泡:e.stopPropagation();
e.target//获得目标元素
e.preventDefault()//阻止默认行为
<!DOCTYPE HTML>
<html>
<head>
<title>事件处理</title>
<meta charset="utf-8"/>
<style>
.d1 .d2 .d3{cursor:pointer}
.d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
}
.d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
.d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div id="d1" class="d1">
<div id="d2" class="d2" >
<div id="d3" class="d3" >
</div>
</div>
</div>
<script>
//定义函数highLight
function hL(e){
//设置当前div的背景颜色为黄色
this.style.background="yellow";
//弹出提示:我是id
alert("我是 "+this.id);
//清除当前div的背景颜色
this.style.background="";
//阻止冒泡
e.stopPropagation();
};
d1.addEventListener("click",hL);
//为id为d1的元素的添加事件监听:事件名为click，事件处理函数为highLight
d2.addEventListener("click",hL);
//为id为d2的元素的添加事件监听:事件名为click，事件处理函数为highLight
d3.addEventListener("click",hL);
//为id为d3的元素的添加事件监听:事件名为click，事件处理函数为highLight
</script>
</body>
</html>