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

更新日期: 2019-08-11阅读: 2k标签: 事件

一、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. 事件冒泡阶段

 

链接: https://fly63.com/article/detial/4931

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

CSS中的pointer-events属性实现点穿效果

具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!