JS15 JavaScript中的事件流

发表于 更新于 分类于 阅读次数：

JavaScript中的事件流

什么是事件流

当点击页面的某个按钮时，单击事件并不仅仅发生在按钮上。换句话说，在单击按钮的同时，也点击了按钮的容器元素，甚至也单机了整个页面。

事件流描述的是从页面中接受时间的顺序，IE和Netscape提出了几乎相反的事件流的概念：

  1. IE的事件流是事件冒泡流
  2. Netscape是事件捕获流

大多是情况下都是将事件处理程序添加到事件冒泡阶段

事件冒泡

IE的事件流叫做事件冒泡（Event Bubbling），即事件开始时由最具体的元素（嵌套层次最深的节点）接受，然后逐级向上传播，直至文档根节点。

以下面的HTML页面为例：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
  <body>
    <div id="myDiv">Click Me</div>
  </body>
</html>

当点击了<div>元素，click事件会按照如下顺序传播

1
2
3
4
graph LR
div-->body
body-->html
html-->document

事件从我们单击的元素开始，沿着DOM树向上传播，在每一级节点上都会发生，直至传播到document对象

事件捕获

Netscape提出的另一种事件流是事件捕获（Event Capturing），即不太具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件。事件捕获的用于在于事件到达预订目标之前捕获它。

仍然以上面的页面作为例子，在事件捕获的状态下，点击<div>元素，click事件会按照相反的顺序传播：

1
2
3
4
graph LR
document-->html
html-->body
body-->div

事件捕获过程中，document对象最先接收到click事件，然后事件沿DOM树向下，直至传播到事件的实际目标，即<div>元素

DOM事件流

==DOM2级事件规定的事件流包括了三个阶段==：

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

首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件作出相应。

以前面的HTML页面为例，单击<div>元素会按照下图顺序触发事件

在DOM事件流中，实际的目标<div>元素在捕获阶段不会接收到事件，这意味着在捕获阶段事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，事件在<div>上发生。然后冒泡阶段发生，事件有传播回document

在事件处理中，事件处于目标阶段被看成冒泡阶段的一部分。

为了最大限度的兼容，大多是情况下都是将事件处理程序添加到事件冒泡阶段。不是特别需要，不建议在事件捕获阶段注册事件处理程序

DOM2级事件处理程序

DOM2级事件定义了对两个方法：

  1. addEventListener：添加事件处理程序
  2. removeEventListener：删除事件处理程序

所有DOM节点都包括这两个方法，它们都接受3个参数，前两个参数是要处理的事件名和作为事件处理程序的函数。

第三个参数是一个布尔值，如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。默认为false

同一个EventTarget注册了多个相同的EventListener，那么重复的实例会被抛弃。所以这么做不会使得EventListener被调用两次，也不需要用removeEventListener手动清除多余的EventListener，前提是options中的capture`的参数值一致。

看一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件冒泡</title>
  <style>
    #outer {
      width: 500px;
      height: 300px;
      background: darkcyan;
    }
    #inner {
      width: 300px;
      height: 150px;
      background: chocolate;
    }
  </style>
</head>
<body>
  <div id="outer">
    Parent
    <div id="inner">Child</div>
  </div>
</body>
<script>
  const outer = document.getElementById('outer'),
    inner = document.getElementById('inner');

  outer.addEventListener('click', function () {
    console.log('parent')
  });

  inner.addEventListener('click', function () {
    console.log('child')
  });
</script>
</html>

而点击child，事件在冒泡阶段触发，首先被触发的是child本身，打印了child，然后向上层冒泡，触发parent的事件，打印出parent

将addEventListener的第三个参数改变为true，则事件触发由冒泡阶段转为捕获阶段，此时，当点击child，事件在捕获阶段的传播从document开始，向下传播到parent，然后再到child本身，所以会先打印parent，然后才打印出child

当冒泡阶段和捕获阶段都会调用事件处理程序时，事件按DOM事件流的顺序执行时间处理程序

当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序。

1
2
3
4
5
6
7
8
9
10
11
12
outer.addEventListener('click', function() {
  console.log('parent冒泡')
}, false);
outer.addEventListener('click', function() {
  console.log('parent捕获')
}, true);
inner.addEventListener('click', function() {
  console.log('child冒泡')
}, false);
inner.addEventListener('click', function() {
  console.log('child捕获')
}, true);

上面的代码，由于child是处于目标阶段的事件，执行的顺序和我们书写的顺序有关，因此是'child冒泡'在前，而'child捕获'在后。而parent的事件就会按照DOM事件流顺序执行，即先'parent捕获'后'parent冒泡'

因此，这种情况下的调用顺序是：

1
2
3
4
graph LR
parent捕获-->child冒泡
child冒泡-->child捕获
child捕获-->parent冒泡

如果我们改动一下书写顺序：

1
2
3
4
5
6
7
8
9
10
11
12
outer.addEventListener('click', function() {
  console.log('parent冒泡')
}, false);
outer.addEventListener('click', function() {
  console.log('parent捕获')
}, true);
inner.addEventListener('click', function() {
  console.log('child捕获')
}, true);
inner.addEventListener('click', function() {
  console.log('child冒泡')
}, false);

那么调用顺序就变成了：

1
2
3
4
graph LR
parent捕获-->child捕获
child捕获-->child冒泡
child冒泡-->parent冒泡

addEventListenr的第三个参数

（2020.06.07更新）

在旧版本的DOM规定中，addEventListener的第三个参数如上所述，是一个布尔值，表示是否在捕获阶段调用事件处理程序。但是在新版本浏览器中支持第三个参数传入一个对象，它可以包含各种属性：

  • capture，用来表示listener回调函数是否在捕获阶段时触发
  • once，表示listener在添加后最多调用一次，如果是true，listener会在被调用之后自动移除
  • passive，如果设置为true，表示listener永远不会调用preventDefault()，如果listener中调用了preventDefault()客户端会忽略并抛出控制台警告，利用这个属性可以避免在某些事件中调用preventDefault()从而导致客户端公洞处理期间性能降低，导致滚屏卡顿

某些版本的浏览器可能不支持第三个参数为对象的语法，需要对这种情况进行检测，原理就是为检测的options中的某个属性设置一个全局的变量，来表示这个属性是否被支持，而这个变量的赋值是在try...catch中对options的被检测属性的getter中完成的，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
var passiveSupported = false;

try {
  var options = Object.defineProperty({}, "passive", {
    get: function() {
      passiveSupported = true;
    }
  });

  window.addEventListener("test", null, options);
} catch(err) {}

事件委托

事件委托就是把一个元素响应事件的函数委托到父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

事件委托的优点：

  1. 提高性能
  2. 动态绑定事件（不必再为动态生成的、需要绑定事件的元素逐一绑定事件）

这样的一个例子：鼠标放到li上，让对应的li背景变红：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</body>
<script>
  document.querySelector('#ul').addEventListener('mouseover', function (e) {
    if(e.target.tagName.toLowerCase() === 'li') {
      e.target.style.backgroundColor = 'red'
    }
  });

  document.querySelector('#ul').addEventListener('mouseout', function (e) {
    if(e.target.tagName.toLowerCase() === 'li') {
      e.target.style.backgroundColor = '#fff';
    }
  });
</script>
</html>

target属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

这样避免了在所有的li上绑定事件，而且如果是动态生成的节点，直接在li上绑定事件就需要再次绑定，而事件委托就不需要。

利用jquery也可以实现：

1
2
3
$("ul").on("click","li",function(){
  // some code here
})

其中on方法的第二个参数是一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。

关于事件委托的一个问题

例如，当我们在ul上绑定了点击事件，想要点击<li>触发，但是<li>中间有着<span>，点击事件实际目标就是<span>，对e.target.tagName进行判断是否等于LI是不成立的，导致事件委托不能生效

解决方法是，当点击到<span>时，需要向外层递归寻找<li>标签，直到找到<li>为止，或者找到外层的<ul>为止

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const ul = document.querySelector('ul');

ul.addEventListener('click', (e) = > {
  let target = e.target;
  while (target.tagName !== 'LI') {
    target = target.parentNode;
    if (target === ul) {
      target = null;
      break
    }
  }
  if (target.tagName.toLowerCase() === 'li') {
    console.log(e.target.innerHTML)
  }
})

所以或许用其他的选择器代替标签选择器是一个好的方式。

阻止事件冒泡

event.stopPropagation()

可以使用event.stopPropagation()来阻止事件继续传播，在上面的parent和child的例子中，如果将child绑定的事件改为下面的代码：

1
2
3
4
5
6
7
outer.addEventListener('click', function() {
  console.log('parent冒泡')
}, false);
inner.addEventListener('click', function() {
  console.log('child冒泡');
  e.stopPropagation()
}, false);

这样再次点击child，就不会触发parent的click事件

e.target

也可以通过e.target来阻止事件冒泡

1
2
3
4
5
6
document.body.addEventListener('click', e = > {
  // 通过e.target判断阻止冒泡
  if (e.target && e.target.matches('a')) {
    return;
  }
})

return false

JS的原生的事件绑定中，return false是不能阻止事件冒泡的，它可以用来阻止浏览器的默认事件，作用于event.preventDefault()相同

在jQuery绑定的事件中使用return false，既阻止默认行为又停止冒泡

参考