前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于DOM事件流、DOM0级事件与DOM2级事件

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

作者头像
Leophen
发布2019-08-26 17:38:26
1.7K0
发布2019-08-26 17:38:26
举报
文章被收录于专栏:Web前端开发Web前端开发

一、DOM 事件模型

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

二、流

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

三、事件流

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

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

1、事件冒泡

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

举个例子:

代码语言:javascript
复制
<!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 和它的父元素,加入点击事件

代码语言:javascript
复制
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、事件捕获阶段

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

代码语言:javascript
复制
<!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 点击事件更改为使用事件捕获模式

代码语言:javascript
复制
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(),举个例子:

代码语言:javascript
复制
<!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 事件做了一些改造:

代码语言:javascript
复制
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 事件

代码语言:javascript
复制
<input id="myButton" type="button" value="Click Me" onclick="alert('Hello1');" >

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

代码语言:javascript
复制
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,则表示在捕获阶段调用事件处理程序

举个例子:

代码语言:javascript
复制
<input id="myButton" type="button" value="Click Me" onclick="alert('Hello1');" >
代码语言:javascript
复制
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. 事件冒泡阶段
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、DOM 事件模型
  • 二、流
  • 三、事件流
    • 1、事件冒泡
      • 2、事件捕获
      • 三、DOM 事件流
        • 1、事件捕获阶段
          • 2、处于目标阶段
            • 3、事件冒泡阶段
            • 四、阻止事件冒泡
            • 五、DOM0级事件
              • 1、标签内写 onclick 事件
                • 2、在 JS 中 使用onclick = function(){}
                • 六、DOM2级事件
                  • 1、DOM2级事件的方法
                    • 2、DOM2级事件的使用
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档