1,什么是事件冒泡
有层级关系的一连串的盒子都添加了事件,触发子盒子的事件是,该子盒子的父级及以上的元素的事件也会被触发;
如下面的代码,当我们点击子盒子dv3时,父盒子dv2,dv1的点击事件也会被触发,这就是事件冒泡
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
#dv1{
width: 500px;
height: 500px;
background-color: #FF0000;
}
#dv2{
width: 400px;
height: 400px;
background-color: lightblue;
}
#dv3{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2" >
<div id="dv3"></div>
</div>
</div>
<script src="public.js"></script>
<script>
//什么是事件冒泡
// 给3个div都添加事件
my$('dv1').onclick = function(){
alert("div1事件触发");
};
my$('dv2').onclick = function(){
alert("div2事件触发");
};
my$('dv3').onclick = function(){
alert("div3事件触发");
};
// 当点击子集元素 触发点击事件时候,父级元素的点击事件也会被触发,这就是 事件冒泡
</script>
</body>
2,阻止事件冒泡
阻止事件冒泡有两种方式
1,在要要触发的点击事件函数中 写 window.event.cancelBubble = true 这种方法 IE 和谷歌 支持,而火狐不支持
2,在事件处理函数中传入一个对象参数, 在函数中添加 对象参数.stopPropagation;
<style>
#dv1{
width: 500px;
height: 500px;
background-color: #FF0000;
}
#dv2{
width: 400px;
height: 400px;
background-color: lightblue;
}
#dv3{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2" >
<div id="dv3"></div>
</div>
</div>
<script src="public.js"></script>
<script>
my$('dv1').onclick = function(){
console.log("这是div1");
};
my$('dv2').onclick = function(){
console.log("这是div2");
};
//第一种方法;
// my$('dv3').onclick = function(){
// console.log("这是div3");
// window.event.cancelBubble = true; // ie 和 谷歌支持
// //添加阻止事件冒泡后 点击子盒子 父级盒子的事件不会被触发
// };
//第二种方法
my$('dv3').onclick = function(e){
console.log("这是div3");
e.stopPropagation();// 火狐和谷歌支持 ie不支持
};
</script>
3事件的三阶段
事件捕获阶段
目标阶段
事件冒泡阶段
在事件处理函数中传入一个对象参数, 对象参数.eventPhase 属性可以判断事件处于哪个阶段 该值为1 则是 事件捕获阶段
2 为目标阶段 3位事件冒泡阶段, 在addEventListener()方法中 第三个参数可以控制事件的阶段,false设置对象为冒泡阶段, true设置对象为为捕获阶段
<body>
<div id="dv1">
<div id="dv2" >
<div id="dv3"></div>
</div>
</div>
<script>
/*
*
*
* 事件有三个阶段:
* 1,事件捕获阶段: 由外到内
* 2,事件目标阶段: 最开始选择的那个
* 3,事冒泡阶段: 由内到外
*
*
* 事件对象.eventPhase属性可以查看事件触发是所处的阶段
* 它会返回属性值
* 1---捕获阶段
* 2---目标阶段
* 3---事件冒泡阶段
*
* addEventListener("事件类型",事件处理函数,控制事件的阶段)
*
* 控制事件的阶段有两个参数值
* false---由内到外
* true---由外到内
*
*
* window.event和参数e都是事件处理参数
*
* */
</script>
<script src="public.js"></script>
<script>
var arr = [my$('dv1'),my$('dv2'),my$('dv3')];
for(var i = 0; i < arr.length; i++){
var obj = arr[i];
obj.addEventListener("click",function (e) {
console.log(this.id + '=====' + e.eventPhase)
},false)
}
</script>