20240701
https://cloud.tencent.com/developer/article/2018778
HTML DOM addEventListener() 方法
document.addEventListener(event, function, useCapture)
参数 描述
event 必需。描述事件名称的字符串。
注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必需。描述了事件触发后执行的函数。
当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
可能值：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
<div class="div1" id="div1">
<div class="div2" id="div2"></div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click",function () {
alert("你点击了div1")
},false); //false 在冒泡阶段执行
div2.addEventListener("click",function () {
alert("你点击了div2")
},false);
</script>
当点击子元素 div2 的时候，会先弹出 你点击了div2 的弹框后，再弹出 你点击了div1 的弹框。
如果将div1的addEventListener方法中的最后的布尔参数值改成true，来看看什么效果：
<div class="div1" id="div1">
<div class="div2" id="div2"></div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click",function () {
alert("你点击了div1")
},true); //false 在捕获阶段执行
div2.addEventListener("click",function () {
alert("你点击了div2")
},false);
</script>
提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的 事件句柄。
事件是可以被 JavaScript 侦测到的行为。
鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。
wind=>documen=> body=>div=>btn 捕获 1-5
wind<=documen<= body<=div<= btn 冒泡 6-10
btn =>btn 触发 5-6
事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。
如果它的父级元素也有某个事件函数，当执行完它的事件函数后，也就会执行它父级的事件函数。
当点击子元素 div2 的时候，会先弹出 你点击了div1 的弹框后，再弹出 你点击了div2 的弹框。,和之前的顺序就不一样了。
1、JS阻止事件冒泡
我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。但是IE8及以下不支持e.stopPropagation() 方法，所以就封装一个方法。
<script>
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation(); //W3C阻止冒泡方法
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
</script>
2、JQ阻止事件冒泡
jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
<script>
$("#parents").click(function () {
alert("你点击了parents区域")
});
$("#child").click(function () {
alert("你点击了child区域");
return false;
});
</script>
