1.事件流
（1）事件流
（2）事件捕获
从最外层盒子依次触发同名事件 所以即便先点击子盒子，优先弹出的还是子盒子内容
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<style>
.father {
overflow: hidden;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
.son {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 80px auto;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="father">
父盒子
<div class="son">子盒子</div>
</div>
<script>
// 事件流
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// 1. 事件捕获
//从最外层的盒子依次触发同名事件
// // 点击父盒子
father.addEventListener('click', function () {
alert('我是爸爸')
}, true) // 事件捕获
// 点击子盒子
son.addEventListener('click', function () {
alert（"我是儿子"）
}, true) // 事件捕获
</script>
</body>
(3)事件冒泡
顺序即和事件捕获相反
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<style>
.father {
overflow: hidden;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
.son {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 80px auto;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="father">
父盒子
<div class="son">子盒子</div>
</div>
<script>
// 事件流
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// 2.事件冒泡
// // 点击父盒子
father.addEventListener('click', function () {
alert('我是爸爸')
}, false) // 事件捕获
// 点击子盒子
son.addEventListener('click', function () {
alert("我是儿子")
}, false) // 事件捕获
</script>
</body>
(4)阻止冒泡
因为语法默认启动冒泡，有时候不符合业务要求，则需要阻止冒泡，只触发相应事件，不会触发父级
注意：事件对象.stopPropagation（）不止能阻止冒泡，还可以阻止捕获
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<style>
.parent {
overflow: hidden;
width: 600px;
height: 600px;
background-color: brown;
margin: 120px auto;
text-align: center;
}
.father {
overflow: hidden;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
.son {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 80px auto;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="parent">
爷盒子
<div class="father">
父盒子
<div class="son">子盒子</div>
</div>
<script>
// 事件流
const parent = document.querySelector('.parent')
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// 2.事件冒泡
//点击爷盒子
parent.addEventListener('click', function () {
alert('我是爷爷')
})
// // 点击父盒子
father.addEventListener('click', function () {
alert('我是爸爸')
}) // 事件捕获
// 点击子盒子
son.addEventListener('click', function (e) {
alert("我是儿子")
//阻止冒泡
e.stopPropagation()
}) // 事件捕获
</script>
</body>
（5）鼠标经过/离开事件的区别
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<style>
.father {
overflow: hidden;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
.son {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 80px auto;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="father">
父盒子
<div class="son">子盒子</div>
</div>
<script>
// 事件流
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// // // // 1、 鼠标进入事件 mouseover==>存在事件冒泡
father.addEventListener('mouseover', function () {
alert('鼠标进入父盒子')
}) // 事件捕获
// 点击子盒子
son.addEventListener('mouseover', function (e) {
alert("鼠标进入子盒子")
}) // 事件捕获
// // // //2.鼠标进入事件 mouseenter==>不存在事件冒泡
father.addEventListener('mouseenter', function () {
alert('鼠标进入父盒子')
})
son.addEventListener('mouseenter', function () {
alert('鼠标进入子盒子')
})
</script>
</body>
(5)事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<script>
//事件委托
//事件绑定给父级，父级触发事件
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
//this.style.color = 'red'
//需要通过事件对象，得到事件源 console.log(e.target)
//通过事件源的tagName 能够拿到当前事件源的标签名字
//通过e.target获得事件源
//通过e.target.tagName获取当前事件源的标签名字
//通过 e.target.tagName 判断事件源的标签名字，如果是li，就修改样式
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
} else {
console.log(e.target.tagName)
console.log('不是li')
}
})
</script>
</body>
</html>
