事件捕获和事件冒泡（如何改变监听事件触发的时机）

<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()第三个参数可以改变事件触发的时机。

来源：CSDN

作者：挖煤小子

链接：https://blog.csdn.net/Zoy_Gong/article/details/81235520

标签

阻止冒泡

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!