冒泡事件:
给元素添加某一事件的时候,那么触发这个事件的时候,根据dom结构 触发同类事件,知道最顶峰层 对象一般的浏览器都是window,ie8浏览是document
事件的捕获:
从最底层往下捕获,直到捕获到元素为止就停止传播
事件执行的机制:时间的冒泡和事件的捕获
默认为事件的冒泡
如果想要执行事件捕获,那么addEventListenter(事件类型,处理函数,Boolean)
第三个参数默认为false(事件冒泡)
第三个参数为true的时候,那么就表示事件捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.outer {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background: #58bc58;
}
.center {
width: 300px;
height: 300px;
background: #58a;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
<script>
/*
*/
var inner = document.querySelector(".inner");
var center = document.querySelector(".center");
var outer = document.querySelector(".outer");
inner.addEventListener(
"click",
function(e) {
console.log("inner");
},
true
);
center.addEventListener(
"click",
function() {
console.log("center");
},
true
);
outer.addEventListener(
"click",
function() {
console.log("outer");
},
true
);
document.body.addEventListener(
"click",
function() {
console.log("body");
},
true
);
</script>
</body>
</html>