事件捕获和事件冒泡

街边吃垃圾

已于 2023-03-01 20:33:05 修改

阅读量133

点赞数

分类专栏： js 文章标签：事件捕获事件冒泡

于 2021-01-11 15:11:06 首次发布

本文链接：https://blog.csdn.net/zhangjing0320/article/details/112468562

版权

js 专栏收录该内容

99 篇文章 1 订阅

订阅专栏

参考：https://segmentfault.com/a/1190000012729080
https://www.cnblogs.com/liuarui/p/11438476.html

记住黑字部分。。。。

什么是事件？

JavaScript和HTML之间的交互是通过事件实现的。页面发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）

事件冒泡

事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。所有现代浏览器都支持事件冒泡，并且会将事件一直冒泡到window对象。

事件捕获

不太具体的节点应该更早的接收到事件，而在最具体的节点应该最后接收到事件。事件捕获的用以在于事件到达预定目标之前捕获它。

DOM2级事件的3个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

在这里插入图片描述

<body>
    <div id="div1">
      div1
      <div id="div2">
        div2
      </div>
    </div>
    <script>
      window.onload = function() {
        let div1 = document.getElementById('div1')
        let div2 = document.getElementById('div2')
        // div2新增一个事件捕获
        div2.addEventListener('click', () => console.log('div2事件捕获'), true)
        // div2新增一个事件冒泡
        div2.addEventListener('click', () => console.log('div2事件冒泡'), false)
        // div1新增一个事件冒泡
        div1.addEventListener('click', () => console.log('div1事件冒泡'), false)
        // div1新增一个事件捕获
        div1.addEventListener('click', () => console.log('div1事件捕获'), true)
      }
    </script>
 </body>

点击div2
输出：div1事件捕获、div2事件捕获、div2事件冒泡、div1事件冒泡

点击div1:
输出：div1事件捕获， div1事件冒泡

在这里插入图片描述

街边吃垃圾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获和事件冒泡

参考：https://segmentfault.com/a/1190000012729080https://www.cnblogs.com/liuarui/p/11438476.html记住黑字部分。。。。什么是事件？JavaScript和HTML之间的交互是通过事件实现的。页面发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）事件冒泡事件开始时
复制链接

扫一扫