1 事件周期 2 DOM：3个阶段 3 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件 4 2.目标触发:优先触发目标元素绑定的事件处理函数 5 目标元素:实际点击的元素 6 3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数 7 修改事件触发的顺序: 8 btn.addEventListener("事件名称",函数对象,capture) 9 其中:capture表示是否在捕获阶段就提前触发 10 默认false,只在冒泡阶段才触发 11 改为true,在捕获阶段提前触发 12 13 阻止冒泡必须要用到的事件对象:event 14 事件发生时,自动创建的,封装事件信息的对象 15 还提供了对事件进行操作的API 16 如何获得event对象: 17 按照DOM对象:事件发生时会自动创建event对象 18 会将event对象作为事件处理函数的第一个参数自动传入 19 阻止冒泡:e.stopPropagation(); 20 e.target//获得目标元素 21 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>
原文：http://www.cnblogs.com/longly/p/6243760.html