JS HTML DOM中的事件冒泡和事件捕获_根据冒泡获取点击的元素-优快云博客

本文链接：https://blog.youkuaiyun.com/chesterblue/article/details/84038289

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

例：将<跨度>元素插入到<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