「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」
事件
在我们开发日常中，我们与页面的交互或者页面与页面的交互都是需要javaScript来实现，而javaScript与html之间的交互瞬间就是事件。比如，我们点击页面时，页面出现了相应的变化。
事件捕获
点击页面的某个元素，页面最外面的document会先接受到事件，然后再逐级往下传播事件，直到我们点击的那个元素接受到事件了。
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件捕获</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
如面代码所示，我们在页面上点击一下id为app的元素，相当于给它一个点击事件，但是，实际上不是它先接受到点击事件，而是document先接受到事件 —> body接受到事件 —> div接受到事件，这样逐级往下传播事件。
事件冒泡
页面中某个元素得到事件后，会把事件逐级往上传播，直到最外面一层接收到事件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件捕获</title>
</head>
<body>
<div id="parent">父元素
<div id="children">子元素</div>
</div>
</body>
</html>
<script>
document.getElementById('parent').addEventListener("click", (e) => {
console.log('点击了parentEvent')
});
document.getElementById('children').addEventListener("click", (e) => {
console.log('点击了childrenEvent')
});
</script>
如面代码所示，我们在页面上点击一下“子元素”，他会打印出什么东西呢？结果是‘点击了childrenEvent’、‘点击了parentEvent’，为啥呢，我明明没有点击‘父元素’，它为啥也会触发这个点击事件呢？这就是“事件冒泡”；在这个过程中，最先接受到事件的是id为children的元素 —> id为parent的元素 —> body —> document,这样子逐级往上传播事件。
事件
当我们给页面上的某个元素一个事件时，这个事件会沿着特定的方向传播，形成一个事件流；在“DOM2事件流”中规定了事件流就有三个，分别是事件捕获阶段、处于目标阶段、事件冒泡阶段。从document传播到body这段属于事件捕获阶段，传到div的这个瞬间属于处于目标阶段，再从div往上传播，到body，到document这段属于事件冒泡。
事件委托
有这样的一段代码
<ul>
<li>甲</li>
<li>乙</li>
<li>丙</li>
</ul>
现在需求来了，当我点击某个元素时，我就要改变某个元素的背景颜色；按以前的知识点，我们是需要给每个li标签添加一个事件，这样的话就会出现一个问题，如果有一百个li标签，那岂不是要添加一百个事件，这样不仅费人力，还会增加很多重复代码，使代码冗余。这时候我们可以使用事件委托，就是我们把事件委托给ul标签，只要你点击了下面的li标签，就会发生事件冒泡，把事件传到ul标签，这样的话就只需要一个事件就可以完美解决了。
阻止默认事件
- w3c是使用e.stopPropagation()
- IE是使用e.cancelBubble = true
