冒泡与捕获
冒泡现象:
自底向上执行事件函数
阻止冒泡:
1,window.event.cancelBubble = true //window.event存在时
2,event.stopPropagation();//window.event不存在时,使用event参数
捕获:和冒泡正好相反,但是捕获事件实际上是浏览器的真正执行顺序。若使用捕获则可在事件监听将第3个参数设为true。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 50px;
background-color: burlywood;
border: solid 5px red;
}
</style>
</head>
<body>
<div id="divOut">我是最外层的div
<div id="divMid" >我是中间的
<div id="divIn">
我是最里层的
</div>
</div>
</div>
<script>
//先执行最里边的事件,再依次往外执行相应事件,这就是冒泡现象
/* function clickInDiv()
{
alert("正在执行最里边的div点击事件");
console.log(window.event);
window.event.cancelBubble = true;
}*/
/* function clickMidDiv()
{
alert("正在执行中间的div点击事件");
}*/
/*var divMid = document.getElementById("divMid");
divMid.onclick = function (ev){
alert("正在执行中间的div点击事件");
event.stopPropagation();
}*/
/*function clickOutDiv()
{
alert("正在执行最外边的div点击事件");
}*/
/*var divOut = document.getElementById("divOut");
divOut.addEventListener("click", function (ev) {
alert("正在执行最外边的div点击事件");
ev?ev.stopPropagation():window.event.cancelBubble = true;
});*/
//------------------执行捕获
var divNodes = document.getElementsByTagName("div");
for(let i = 0; i < divNodes.length; i++){
divNodes[i].addEventListener("click", function(){
alert("你点了"+divNodes[i].id);
},true);
}
</script>
</body>
</html>