事件处理模型———— 事件冒泡，捕获

最新推荐文章于 2021-07-14 12:14:27 发布

原创最新推荐文章于 2021-07-14 12:14:27 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

DOM event 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了事件处理模型中的两种核心机制——事件冒泡与事件捕获。解释了这两种机制的工作原理，包括事件如何从子元素传播到父元素（事件冒泡），以及事件如何从父元素传递到子元素（事件捕获）。同时指出了某些特定事件类型不参与冒泡的情况，并通过具体的HTML与JavaScript示例展示了如何在实际应用中实现这些事件处理。

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

事件处理模型———— 事件冒泡，捕获

事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，
自子元素冒泡向父元素。（自底向上）

事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，
自父级元素捕获至子元素（事件源元素）。（自顶向下）

IE没有捕获事件

触发顺序，先捕获，后冒泡。

focus, blur, change, submit, reset, select等事件不冒泡

<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
            var wrapper = document.getElementsByClassName('wrapper')[0],
                 content = document.getElementsByClassName('content')[0],
                 box = document.getElementsByClassName('box')[0];
             
                wrapper.addEventListener('click',function(){
                console.log(wrapperBubble);
                },true);
                wrapper.addEventListener('click',function(){
                console.log(contentBubble);
                },true);
                wrapper.addEventListener('click',function(){
                console.log(boxBubble);
                },true);
                wrapper.addEventListener('click',function(){
                console.log(wrapper);
                },false);
                wrapper.addEventListener('click',function(){
                console.log(content);
                },false);
                wrapper.addEventListener('click',function(){
                console.log(box);
                },false);
</script>