专栏首页Web前端开发关于DOM事件流、DOM0级事件与DOM2级事件

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

一、DOM 事件模型

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

二、流

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

三、事件流

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

事件流所描述的就是从页面中接受事件的顺序,事件流分为两种:事件冒泡(主流)和事件捕获

1、事件冒泡

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

举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
</body>
</html>

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

var button = document.getElementById('clickMe');
 
button.onclick = function() {
  console.log('1. You click Button');
};
document.body.onclick = function() {
  console.log('2. You click body');
};
document.onclick = function() {
  console.log('3. You click document');
};
window.onclick = function() {
  console.log('4. You click window');
};

点击按钮运行效果:

也就是说,click 事件首先在 <button> 元素上发生,然后逐级向上传播,这就是事件冒泡

2、事件捕获

父元素的节点更早接收事件,而具体元素最后接收事件,与事件冒泡相反

三、DOM 事件流

DOM事件流包括三个阶段:

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

1、事件捕获阶段

当事件发生时,首先发生的是事件捕获,为父元素截获事件提供了机会

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
</body>
</html>

上面事件冒泡的 Demo 中,window 点击事件更改为使用事件捕获模式

var button = document.getElementById('clickMe');
 
button.onclick = function() {
  console.log('1. You click Button');
};
document.body.onclick = function() {
  console.log('2. You click body');
};
document.onclick = function() {
  console.log('3. You click document');
};
// window.onclick = function() {
//   console.log('4. You click window');
// };
window.addEventListener('click', function() {
  console.log('4. You click window');
}, true);

此时,点击 button 的效果是这样的:

可以看到,点击事件先被父元素截获了,且该函数只在事件捕获阶段起作用

2、处于目标阶段

事件到了具体元素时,在具体元素上发生,并且被看成冒泡阶段的一部分

3、事件冒泡阶段

最后,冒泡阶段发生,事件开始冒泡

四、阻止事件冒泡

事件冒泡过程,是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。

阻止方法是使用 stopPropagation(),举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling</title>
</head>
<body>
  <button id="clickMe">Click Me</button>
</body>
</html>

还是上面的 demo,这里对 button 的 click 事件做了一些改造:

var button = document.getElementById('clickMe');
 
// button.onclick = function() {
//   console.log('1. You click Button');
// };
button.addEventListener('click', function(event) {
  // 这里event为事件对象
  console.log('1. You click Button');
  event.stopPropagation();
  console.log('Stop Propagation!');
}, false);
document.body.onclick = function() {
  console.log('2. You click body');
};
document.onclick = function() {
  console.log('3. You click document');
};
window.addEventListener('click', function() {
  console.log('4. You click window');
}, true);

点击后,效果如下图:

不难看出,事件在到达具体元素后,停止了冒泡,但不影响父元素的事件捕获

五、DOM0级事件

DOM0级事件,就是直接通过 onclick 等方式实现相应的事件

1、标签内写 onclick 事件

<input id="myButton" type="button" value="Click Me" onclick="alert('Hello1');" >

2、在 JS 中 使用onclick = function(){}

document.getElementById("myButton").onclick = function () {
    alert('Hello2');
}

运行结果 - 点击弹出:

这说明 DOM0 级添加事件时,后面的事件会覆盖前面的事件,而 DOM2级则不会,多个事件都会执行;

另外,DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行

六、DOM2级事件

1、DOM2级事件的方法

主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定和删除事件处理程序的操作:

  • addEvenetListener
  • removeEventListener

2、DOM2级事件的使用

所有的 DOM 节点都包含这两个方法,使用方法如下:

  • target.addEventListener(type, listener[, useCapture]);
  • target.removeEventListener(type, listener[, useCapture]);

并且它们都接受三个参数:

  • type:事件类型,如'click'、'mouseover'、'mouseout',在事件名前不加'on'
  • listener:事件处理方法
  • useCapture:布尔参数,不传该参数时默认是 false,表示在事件冒泡阶段处理,如果是 true,则表示在捕获阶段调用事件处理程序

举个例子:

<input id="myButton" type="button" value="Click Me" onclick="alert('Hello1');" >
document.getElementById("myButton").onclick = function () {
    alert('Hello2');
}
document.getElementById('myButton').addEventListener('click', function() {
  alert('Hello3');
}, true)
document.getElementById('myButton').addEventListener('click', function() {
  alert('Hello4');
}, true)
document.getElementById('myButton').addEventListener('click', function() {
  alert('Hello5');
}, false)

运行结果:

注意:只有 DOM2级事件包含以下三个阶段

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Koa 中间件的原理及其应用

    koa 把很多 async 函数组成一个处理链,每个 async 函数都可以做一些自己的事情,然后用 await next() 来调用下一个 async 函数。...

    Leophen
  • KMP算法的时间复杂度与next数组分析

    KMP 算法是一种改进的字符串匹配算法,用于判断一个字符串是否是另一个字符串的子串

    Leophen
  • Flex弹性布局

    Leophen
  • Symfony 服务容器性能优化

    本文是依赖注入(Depeendency Injection)系列教程的最后一篇文章,本系列教程主要讲解如何使用 PHP 实现一个轻量级服务容器,教程包括:

    柳公子
  • B2B行业,缺少数据,咋个数据分析法?(案例版)

    上一篇B2B行业基本分析思路写完后,很多同学都在催更。在大家热情点击在看下,召唤出本篇。很多同学在抱怨,说自己公司根本没有数据,该怎么分析呢?这个时候一定要牢记...

    接地气的陈老师
  • 米斯特白帽培训讲义(v2)漏洞篇 提权

    提权,顾名思义就是提高自己在服务器中的权限,就比如在 Windows 中你本身登录的用户是 guest,通过提权后就变成超级管理员,拥有了管理 Windows ...

    ApacheCN_飞龙
  • 分布式架构之「 两阶段提交协议」

    两阶段提交协议是一种经典的强一致性中心化副本控制协议。虽然在工程中该协议有较多的问题,但研究该协议能很好的理解分布式系统的几个典型问题。

    猿哥
  • 如何找到并完成兼职项目

    软件开发本身是一个特殊的行业,它让我们可以在工作之余,发挥自己的优势,多获得一些收入! 根据我自己多年来的一点经验,说说如何找到并完成兼职项目,没有提到的地方,...

    大石头
  • jquery - 页面弹框 - 阻止事件冒泡示例

    好了,下一步就是设置.pop_con隐藏,设置display:none,然后编写jquery,设置点击按钮#btn ,触发click()事件的时候,设置.pop...

    Devops海洋的渔夫
  • 微服务架构在Kubernetes上的实现

    我们讨论了最近的微服务趋势,以及伴随微服务架构可能出现的一些复杂问题。在接下来的几周内,我们将深入探讨这个问题。我们将探讨不同设计选择中固有的权衡,以及可以采取...

    美的让人心动

扫码关注云+社区

领取腾讯云代金券