JS HTML DOM中的事件冒泡和事件捕获

最新推荐文章于 2023-08-09 15:04:18 发布

原创最新推荐文章于 2023-08-09 15:04:18 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS中的冒泡和捕获 #DOM树

本文详细解析了DOM事件的两种传播方式：冒泡与捕获。通过实例代码展示了这两种机制的区别，即事件如何从内向外（冒泡）或从外向内（捕获）触发。理解这些机制对于高效地处理网页上的交互事件至关重要。

冒泡：先触发内部元素事件，再触发外部元素事件
捕获：先触发外部元素事件，再触发内部元素事件

例：将<跨度>元素插入到<DIV>元素中，如果用单击事件触发，那么冒泡就先触发<跨度>，再触发的<DIV>，捕获则相反。

下面为简单的代码讲解，可以自己运行感受。

<div id="chufa1">
    <span id="chufa2">点击文字</span>
</div>
<br>
<div id="chufa3">
    <span id="chufa4">点击文字</span>
</div>
<script>
    document.getElementById("chufa1").addEventListener("click", function() {
    alert("你点击了 div 元素!");
}, false);
    document.getElementById("chufa2").addEventListener("click", function() {
    alert("你点击了 span 元素!");
}, false);
     document.getElementById("chufa3").addEventListener("click", function() {
    alert("你点击了 div 元素!");
}, true);
    document.getElementById("chufa4").addEventListener("click", function() {
    alert("你点击了 span 元素!");
}, true);
</script>

其中的addEventListener（活动，功能，FALSE /真），假代表冒泡，真正代表捕获，如果不输入默认为FALSE