//1.事件冒泡:
多个元素嵌套, 有层次关系, 这些元素都注册了相同的事件,如果里面的元素的事件触发了. 外面的元素也会自动地触发
由内到外触发
需要阻止事件冒泡
event.stopPropagation(); --------->谷歌和火狐支持的. ie8不支持
window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. 火狐支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 250px;
height: 250px;
background-color: pink;
}
#box2{
width: 150px;
height: 150px;
background-color: lightcoral;
}
#box3{
width: 70px;
height: 70px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("box3").onclick = function (event) {
console.log("里面的盒子");
//两个盒子绑定了相同的事件,因此需要给里面的盒子阻止冒泡
event.stopPropagation(); --------->谷歌和火狐支持的. ie8不支持
// window.event.cancelBubble = true; // ------>ie8特有的, 谷歌支持. 火狐支持
}
my$("box2").onclick = function () {
console.log("中间的盒子")
}
</script>
</body>
</html>
//2.事件捕获
此时结构和事件冒泡结构一样
//事件捕获: 从外向内触发
my$("box1").addEventListener("click", function () {
console.log("外面的盒子");
},true);// 设置事件捕获, 从外向内出发
my$("box2").addEventListener("click", function () {
console.log("中间的盒子");
}, true);
my$("box3").addEventListener("click", function () {
console.log("里面的盒子");
},true)
点击box3,打印结果如下
//3.事件的三个阶段
事件的三个阶段: event.eventPhase通过这个属性知道当前的事件是什么阶段
* 属性的返回值:
* 1 ---->捕获阶段
* 2----->目标阶段
* 3----->冒泡阶段
*
* 冒泡阶段: 从里到外
* 捕获阶段: 从外到里
* 一般都是冒泡阶段