先执行事件捕获 再执行事件冒泡
事件处理程序：
结论：
html DOM0 默认都是冒泡 DOM2 addEventListener(第三个参数为true 是捕获 false 是冒泡)
html
<!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>
#father{
width: 500px;
height: 500px;
background-color: aqua;
border: 2px solid springgreen;
display: flex;
justify-content:center;
align-items:center;
}
#son-button{
width: 150px;
height: 100px;
background-color: orange;
border-radius: 10px;
}
#son-span{
width: 100px;
height: 50px;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<div>
<div id="father" onclick="console.log('我是father')">
<button id="son-button" onclick="console.log('我是button')">
<span id ="son-span" onclick="console.log('我是span')">快乐按钮</span>
</button>
</div>
</div>
<script>
</script>
</body>
</html>
DOM0
<!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>
#father {
width: 500px;
height: 500px;
background-color: aqua;
border: 2px solid springgreen;
display: flex;
justify-content: center;
align-items: center;
}
#son-button {
width: 150px;
height: 100px;
background-color: orange;
border-radius: 10px;
}
#son-span {
width: 100px;
height: 50px;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<div>
<div id="father">
<button id="son-button">
<span id="son-span">快乐按钮</span>
</button>
</div>
</div>
<script>
var father = document.getElementById('father')
var button = document.getElementById('son-button')
var span = document.getElementById('son-span')
father.onclick = function(){
console.log("我是father");
}
button.onclick = function(){
console.log("我是button");
}
span.onclick = function(){
console.log("我是span");
}
</script>
</body>
</html>
DOM2
<!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>
#father {
width: 500px;
height: 500px;
background-color: aqua;
border: 2px solid springgreen;
display: flex;
justify-content: center;
align-items: center;
}
#son-button {
width: 150px;
height: 100px;
background-color: orange;
border-radius: 10px;
}
#son-span {
width: 100px;
height: 50px;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<div>
<div id="father">
<button id="son-button">
<span id="son-span">快乐按钮</span>
</button>
</div>
</div>
<script>
var father = document.getElementById('father')
var button = document.getElementById('son-button')
var span = document.getElementById('son-span')
var printName = function(){
// console.log(this);//点击的那个dom节点
console.log(this.nodeName);
}
// father.addEventListener('click',printName,false)
// button.addEventListener('click',printName,false)
// span.addEventListener('click',printName,false)
father.addEventListener('click',printName,true)
button.addEventListener('click',printName,true)
span.addEventListener('click',printName,true)
</script>
</body>
</html>
面试题：
捕获的优先级是比冒泡高的 捕获先执行
<!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>
.grandma {
width: 800px;
height: 800px;
background-color: blue;
}
.mother {
width: 700px;
height: 700px;
background-color: orange;
}
.daughter {
width: 600px;
height: 600px;
background-color: orchid;
}
.baby {
width: 500px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="grandma">
grandma
<div class="mother">
mother
<div class="daughter">
daughter
<div class="baby">baby婴儿</div>
</div>
</div>
</div>
<script>
var grandma = document.getElementsByClassName('grandma')[0]
var mother = document.getElementsByClassName('mother')[0]
var daughter = document.getElementsByClassName('daughter')[0]
var baby = document.getElementsByClassName('baby')[0]
// console.log(baby);
var printName = function () {
// console.log(this);//点击的那个dom节点
console.log(this.className);
}
baby.addEventListener("click", printName, false)//冒泡
daughter.addEventListener("click", printName, true)//捕获
mother.addEventListener("click", printName, true)//捕获
grandma.onclick = printName;//冒泡
// 捕获的优先级是比冒泡高的 捕获先执行
// 点击baby
// mother
// daughter
// baby
// grandma
</script>
</body>
</html>
