Dom事件流

最新推荐文章于 2022-05-20 11:07:29 发布

小龙哥学前端

最新推荐文章于 2022-05-20 11:07:29 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/m0_47310515/article/details/120186647

版权

Dom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Dom事件流

在第四代 Web 浏览器（IE4 和 Netscape Communicator 4）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？要理解这个问题，可以在一张纸上画几个同心圆。把手指放到圆心上，则手指不仅是在一个圆圈里，而且是在所有的圆圈里。两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。

事件流描述了页面接收事件的顺序。结果非常有意思，IE 和 Netscape 开发团队提出了几乎完全相反的事件流方案。IE 将支持事件冒泡流，而 Netscape Communicator 将支持事件捕获流。

1.1.事件冒泡(IE事件流)

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      color: white;
      font-size: 20px;
    }
    #outer{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #center{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    #inner{
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="outer">outer
    <div id="center">center
      <div id="inner">inner</div>
    </div>
  </div>
  <script>
    var inner = document.getElementById('inner');
    var center = document.getElementById('center');
    var outer = document.getElementById('outer');
    // 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
    inner.onclick = function () {
      console.log('我是inner点击的');
    }
    // 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
    center.onclick = function () {
      console.log('我是center点击的');
    }
    outer.onclick = function () {
      console.log('我是outer点击的');
    }
  </script>
</body>
</html>

在点击页面中的id为inner的div元素，click事件会以如下顺序发生

div#inner
div#center
div#outer
body
html
document

也就是说，div#inner元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。

所有现代浏览器都支持事件冒泡，只是在实现方式上会有一些变化。IE5.5及早期版本会跳过html元素（从body直接到 document）。现代浏览器中的事件会一直冒泡到 window 对象。

阻止事件冒泡

使用阻止事件冒泡之前，先要知道DOM事件默认提供的一个对象，HTML DOM Event对象。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

https://www.w3school.com.cn/htmldom/dom_obj_event.asp

event.stopPropagation()

直接在对应方法中使用event.stopPropagation()便可阻止事件冒泡。

注意：如果点击方法时需要同时传递其他参数和event，直接传递event这个单词即可

οnclick="test(123,event)"

1.2.事件捕获(Netscape事件流)

Netscape Communicator 团队提出了另一种名为事件捕获的事件流。事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。如果前面的例子使用事件捕获，则点击div元素会以下列顺序触发 click 事件：

document
html
body
div

在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素div。

由于旧版本浏览器不支持，因此实际当中几乎不会使用事件捕获。通常建议使用事件冒泡，特殊情况下可以使用事件捕获。

1.3.DOM事件流

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件。

点击div元素会以如图所示的顺序触发事件。

在 DOM 事件流中，实际的目标（div元素）在捕获阶段不会接收到事件。这是因为捕获阶段从document 到html再到body就结束了。下一阶段，即会在div元素上触发事件的“到达目标”阶段，通常在事件处理时被认为是冒泡阶段的一部分。然后，冒泡阶段开始，事件反向传播至文档。大多数支持 DOM 事件流的浏览器实现了一个小小的拓展。虽然 DOM2 Events 规范明确捕获阶段不命中事件目标，但现代浏览器都会在捕获阶段在事件目标上触发事件。最终结果是在事件目标上有两个机会来处理事件。

注意:所有现代浏览器都支持 DOM 事件流，只有 IE8 及更早版本不支持。

小龙哥学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom事件流

Dom事件流在第四代 Web 浏览器（IE4 和 Netscape Communicator 4）开始开发时，开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？要理解这个问题，可以在一张纸上画几个同心圆。把手指放到圆心上，则手指不仅是在一个圆圈里，而且是在所有的圆圈里。两家浏览器的开发团队都是以同样的方式看待浏览器事件的。当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。事件流描述了页面接收事件的顺序。结果非常有意思，IE 和 Netscape 开发团队提出了几
复制链接

扫一扫