关于javascript:浅析-JavaScript-中的事件委托

3次阅读

共计 3450 个字符，预计需要花费 9 分钟才能阅读完成。

作者：Dmitri Pavlutin

翻译：疯狂的技术宅

原文：https://dmitripavlutin.com/ja…

未经容许严禁转载

首先实现一个小性能：在单击 HTML 的按钮后，把音讯输入到控制台。

为了实现这个小性能，你须要抉择按钮，而后再用 addEventListener() 办法来附加事件监听器：

<button id="buttonId">Click me</button>

<script>
  document.getElementById('buttonId')
    .addEventListener('click', () => console.log('Clicked!'));
</script>

以上就是侦听单个元素（尤其是按钮）上事件的形式。

如果须要监听多个按钮上的事件呢？上面是一种可能的实现：

<div id="buttons">
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  const buttons = document.getElementsByClassName('buttonClass');
  for (const button of buttons) {button.addEventListener('click', () => console.log('Clicked!'));
  }
</script>

你能够在 Codesandbox 上查看它是怎么工作的。

按钮列表被迭代为 for (const button of buttons)，并且每个按钮都被附加了一个新的侦听器。另外在列表中的按钮被增加或删除后，你必须还要手动删除或附加事件监听器。

有没有更好的办法？

侥幸的是，如果咱们应用“事件委托”模式的话，侦听多个元素上的事件只须要一个事件侦听器。

事件委托应用 事件流传 机制的细节。想要要理解事件委托的工作原理，应该先理解什么是事件流传。

当你单击上面 html 中的按钮时：

<html>
  <body>
    <div id="buttons">
      <button class="buttonClass">Click me</button>
    </div>
  </body>
</html>

点击事件会触发多少个元素？毫无疑问，按钮自身会收到单击事件。而且所有按钮的先人，甚至包含 document 和 window 对象也会收到。

点击事件的流传分三个阶段：

捕捉阶段 —— 从window，document 和根元素开始，事件向下扩散至指标元素的先人
指标阶段 —— 事件在用户单击的元素上触发
冒泡阶段——最初，事件冒泡通过指标元素的先人，始终到根元素 document 和 window。

addEventListener 办法的第三个参数 captureOrOptions：

element.addEventListener(eventType, handler[, captureOrOptions]);

使你能够捕捉来自不同阶段的事件。

如果短少 captureOrOptions 参数，或者参数为 false 或 {capture：false}，那么侦听器将捕捉 指标（target）和冒泡阶段（bubble phases）的事件
如果参数是 true 或 {capture：true}，那么侦听器将会侦听 捕捉阶段（capture phase）的事件。

通过上面的代码，你会侦听到在 <body> 元素上产生的捕捉阶段的点击事件：

document.body.addEventListener('click', () => {console.log('Body click event in capture phase');
}, true);

在这个 Codesandbox 演示中，单击按钮时，你能够在控制台中查看事件的传播方式。

那么事件流传是怎么帮忙捕捉多个按钮事件的呢？

该算法很简略：把事件侦听器附加到按钮的父级，并在单击按钮时捕捉冒泡事件。这就是事件委托的工作形式。

让咱们用事件委托来捕捉多个按钮上的点击：

<div id="buttons"> <!-- Step 1 -->
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <!-- buttons... -->
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById('buttons')
    .addEventListener('click', event => { // Step 2
      if (event.target.className === 'buttonClass') { // Step 3
        console.log('Click!');
      }
    });
</script>

关上 Codesandbox 演示，而后单击任意按钮，你会看到 'Click!' 音讯被记录到控制台。

事件委托的思维很简略。你不须要把委托事件监听器间接附加到按钮上，而是能够委托父监听 <div id="buttons">。单击按钮时，父元素的侦听器将会捕捉 冒泡事件（还记得后面所说事件流传吗？）。

应用事件委托须要 3 个步骤：

在下面的例子中，<div id="buttons"> 是按钮的父元素。

document.getElementById('buttons') .addEventListener('click', handler) 将事件侦听器附加到按钮的父元素。该事件侦听器也会对按钮单击做出反馈，因为 按钮单击事件冒泡通过先人元素（因为事件流传）。

单击按钮时，将会用event 对象参数调用处理函数。属性 event.target 拜访在其上调度了事件的元素，在例子中是一个按钮：

// ...
.addEventListener('click', event => {if (event.target.className === 'buttonClass') {console.log('Click!');
    }
});

顺便阐明一下，event.currentTarget 指向事件侦听器间接附加到的元素。在例子中，event.currentTarget 是 <div id="buttons">。

当初，你能够看到事件委托模式的益处：事件委托仅须要一个事件侦听器，而不用像本文最后那样将侦听器附加到每一个按钮上。

当产生点击事件（或流传的任何其余事件）时：

事件从 window、document、根元素向下流传，并通过指标元素的先人（捕捉阶段）；
事件产生在指标（指标阶段）上；
最初，事件在指标先人之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。

该机制称为 事件流传。

事件委托是一种有用的模式，因为你能够只须要用一个事件处理程序就能侦听多个元素上的事件。

应用事件委托须要三个步骤：

确定要监督事件的元素的父级元素
把将事件侦听器附加到父元素
用 event.target 抉择指标元素

扫码进入前端面试星球????，解锁刷题神器，还能够获取 800+ 道前端面试题 和一线常见面试高频考点。

深刻了解 Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13 个帮你进步开发效率的古代 CSS 框架
疾速上手 BootstrapVue
JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
WebSocket 实战：在 Node 和 React 之间进行实时通信
对于 Git 的 20 个面试题
深刻解析 Node.js 的 console.log
Node.js 到底是什么？
30 分钟用 Node.js 构建一个 API 服务器
Javascript 的对象拷贝
程序员 30 岁前月薪达不到 30K，该何去何从
14 个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩大插件
Node.js 多线程齐全指南
把 HTML 转成 PDF 的 4 个计划及实现

更多文章 …

正文完

javascript

发表至： javascript

2020-08-10

0

Css-移动端适配总结

关于程序员:博观约取厚积薄发聊一聊最近读完的几本书太上头了

react下移动端可吸附悬浮窗，悬浮按钮功能

关于javascript:获取浏览器类型及版本ie谷歌火狐edge等

关于redis:redis分布式锁

关于javascript:浅析-JavaScript-中的事件委托

为什么要进行事件委托？

事件流传

3. 事件委托

步骤 1：确定要监督事件的元素的父级元素

步骤 2：把事件侦听器附加到父元素

步骤 3：用 event.target 抉择指标元素

总结

前端刷题神器

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

站内搜索