<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的传播</title>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
#box3 {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function () {
//为三个div绑定单击响应函数
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
*事件的传播
-关于事件的传播网景公司和微软公司有不同的理解
-微软公司认为是应该由内向外传播,应当先触发当前元素上的事件,
然后再向元素的祖先元素上传播,也就是说应该在冒泡阶段执行
-网景公司认为应该由外向内传播,也就是当前事件触发时,应该先触发当前元素最外层的祖先元素事件,
然后再向内传播给后代元素
-W3c结合了两个公司的方案,将事件的传播分为了三个阶段
1.捕获阶段
-在捕获阶段时候,从最外层的祖先元素,向目标元素进行事件的捕获,但是默认不会触发事件
2.目标阶段
-事件捕获到目标元素,捕获结束,开始在目标元素上触发事件
3.冒泡阶段
-事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将第三个参数设置为true,addEventListener(eventStr, callback, true);
ie8以下没有捕获阶段
*
*/
bind(box1, "click", function () {
alert("我是box1的响应函数");
});
bind(box2, "click", function () {
alert("我是box2的响应函数");
});
bind(box3, "click", function () {
alert("我是box3的响应函数");
});
/*
*定义一个函数,用来为指定元素绑定响应函数
*ie11,谷歌,火狐,等,addEventListener()的this是绑定事件的对象
*ie8以下,attachEvent()的this是window
*
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串
* callback 回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
/*
*this是谁由调用方式决定
*callback.call(obj)
*/
//ie8以下
obj.attachEvent("on" + eventStr, function () {
callback.call(obj);
});
}
};
};
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
2022/1/13,事件的传播
最新推荐文章于 2024-08-16 19:02:09 发布