您的位置：首页 > Web前端 > JavaScript

JavaScript-事件周期-点击替换颜色

2017-01-03 09:19 141 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航