关于DOM事件流、DOM0级事件与DOM2级事件

深碍√TFBOYSˉ_ 2023-06-02 09:18 224阅读 0赞

一、DOM 事件模型

DOM 事件模型包括捕获和冒泡，捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到 window

1731684-20190824165647887-1714257141.png

二、流

流的概念，在现今的 JavaScript 中随处可见。比如说 React 中的单向数据流，Node 中的流，还有 DOM 事件流，都是流的一种生动体现。
至于流的具体概念，用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。

三、事件流

浏览器在为当前页面与用户做交互的过程中，比如点击鼠标左键，会出现这个左键是怎么传到页面上，还有怎么响应的问题。

事件流所描述的就是从页面中接受事件的顺序，事件流分为两种：事件冒泡（主流）和事件捕获

1、事件冒泡

1731684-20190824170727890-1390436921.png

事件开始时由具体元素接收，然后逐级向上传播到父元素

举个例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Event Bubbling</title>
  6. </head>
  7. <body>
  8.   <button id="clickMe">Click Me</button>
  9. </body>
  10. </html>

我们给 button 和它的父元素，加入点击事件

  1. var button = document.getElementById('clickMe');
  3. button.onclick = function() {
  4.   console.log('1. You click Button');
  5. };
  6. document.body.onclick = function() {
  7.   console.log('2. You click body');
  8. };
  9. document.onclick = function() {
  10.   console.log('3. You click document');
  11. };
  12. window.onclick = function() {
  13.   console.log('4. You click window');
  14. };

点击按钮运行效果：

1731684-20190824171111093-1785056233.png

也就是说，click 事件首先在

发表评论

表情：
评论列表 （有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

    相关 DOM事件流

    OM事件流所描述的就是从页面中接受事件的顺序，有三个阶段 事件捕获阶段（Capture Phase） 事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着 D...

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 193 阅读

    相关 WebAPI-DOM事件流

    概述 js事件在触发时会在元素节点之间按照特定的顺序进行传播，这个传播的过程就是 DOM 事件流。 例如：给页面中的一个 button 按钮注册了点击事件并进行了点击，

    - 日理万妓- 日理万妓/ 0 赞/ 29 阅读