事件冒泡（Event Bubbling）、事件捕获（Event Capturing）和事件委派（Event Delegation）是 JavaScript 中处理事件的三个关键概念。
事件冒泡是指当一个元素上的事件被触发时，该事件会向父元素进行冒泡传播，逐级触发父元素的相同事件。事件从最具体的元素（例如点击的元素）开始冒泡，直到达到最顶层的元素（通常是document对象）为止。
事件捕获是指事件从最顶层的元素开始，逐级向下传播，直到达到最具体的元素。
事件委派是指将事件处理程序绑定到父元素上，以处理其子元素触发的事件。通过事件委派，我们可以避免为每个子元素都绑定事件处理程序，而是通过事件冒泡在父元素上进行处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡和事件捕获</title>
<style>
.container{
width: 200px;
height: 200px;
background-color: turquoise;
text-align: center;
margin: 0 auto;
}
ul {
list-style: none;
padding: 0;
}
ul li {
width: 100%;
background-color: thistle;
border: 1px solid #000;
padding: 0;
}
</style>
</head>
<body>
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<script type="text/javascript">
let doms = {
container: document.querySelector(".container"),
lis: document.querySelectorAll(".container li")
}
// 事件委派：通过给ul绑定一个click事件，减少了性能消耗。原理是利用了事件冒泡的机制
doms.container.addEventListener("click",function(e) {
console.log("ul ==>",e.target);
},false) // 第三个参数:默认值为false(冒泡),true(事件捕获)
// 当为false时，再点击ul的时候，优先打印的是li的log,再打印ul的log 当为true的时候，优先打印的是ul的log，其次是li的log
// console.log(doms);
for (let i = 0; i < doms.lis.length; i++) {
// console.log( doms.lis[i]);
doms.lis[i].addEventListener("click",function(e) {
// e.stopPropagation(); //阻止事件冒泡
console.log("li",i);
})
}
</script>
</body>
</html>
element.addEventListener("event", function(){ }, options)
options 参数如下图
