<html>
<body>
<div class="container">
<div class="box"></div>
</div>
<script>
document.getElementsByClassName("container")[0].addEventListener("click", function () { alert("container") }, true);
document.getElementsByClassName("box")[0].stopPropagation();
</script>
</body>
</html>
场景:当点击box元素的时候,还是会触发alert("container")事件。
先来理解弄清楚2个名词,”事件捕获“ 和 “事件冒泡”,如下:
事件捕获:window -> document -> html -> body -> 父元素 -> 目标元素
事件冒泡:目标元素 -> 父元素 -> body -> html -> document -> window
stopPropagation()阻止事件冒泡,但是我们在addEventListener()事件监听的时候,增加了第三个参数true,该参数会改变监听事件触发的时机,由冒泡触发改为捕获触发;
所以,当我们点击box元素的时候,事件往目标元素开始捕获,当遇到container元素的时候,就触发了监听事件,从而alert。
总结:addEventListener()第三个参数可以改变事件触发的时机。