在前端开发中，处理 DOM 事件是一项非常基础的任务，而 ES6 的新特性使得处理和管理 DOM 事件变得更加便捷。本文将介绍 ES6 中的事件处理，包括事件追踪和管理，同时提供一些实用的代码示例。
事件追踪
在 ES6 中，我们可以使用 EventTarget 对象来追踪事件的发生和监听。 EventTarget对象是所有 DOM 节点和文档的父级，它有三个方法用于事件处理 - addEventListener(), removeEventListener() 和 dispatchEvent()。
addEventListener()
addEventListener() 方法被用来给特定的 DOM 元素添加事件处理函数，用于处理该元素触发的事件。可以通过该方法来监听 DOM 元素上的某些事件类型。例如，我们可以监听按钮的点击事件：
----- --- - ---------------------------------
----------------------------- -- -- -
-----------------------
---当用户点击按钮时，会在控制台输出 "按钮被点击了！"。
removeEventListener()
removeEventListener() 方法可以用来从 DOM 中移除之前添加的事件处理函数，这样可以避免重复触发事件。例如：
----- --- - ---------------------------------
----- ----------- - -- -- -
-----------------------
-------------------------------- -------------
-
----------------------------- -------------在上述示例中，我们添加了一个 click 事件的监听器，当按钮点击时，会在控制台输出 "按钮被点击了！"。该事件监听器只能被触发一次，因为在回调函数中我们使用了 removeEventListener() 方法来移除监听器。
dispatchEvent()
dispatchEvent() 方法被用于手动触发一个事件，可以接受一个参数 Event 对象。例如：
-- ---------
----- ----------- - --- ---------------------
----- --- - ---------------------------------
----- ----------- - -- -- -
--------------------------
-
----------------------------------- -------------
-- -------
-------------------------------在上述示例中，我们通过 new Event() 方法创建了一个自定义事件，并使用 addEventListener() 方法来监听该事件，当该自定义事件被触发时，会输出 "自定义事件被触发了！"。
事件管理
在 ES6 中，我们可以使用 EventEmitter 类对事件进行管理。EventEmitter 类允许我们发布和订阅事件，可以实现多个组件之间的通信。
EventEmitter
EventEmitter 是一个内置的 Node.js 库，我们可以使用它提供的 on() 和 emit() 方法来监听和触发事件。我们可以使用 npm 来安装 EventEmitter：
--- ------- ------
接下来，我们需要先导入 EventEmitter：
----- ------------ - ------------------
然后，我们可以创建一个 EventEmitter 实例并使用 on() 方法来监听事件：
----- ------------ - --- ---------------
---------------------------- ---------- -
-----------------------
---接着，我们使用 emit() 方法来触发事件：
-------------------------------
当我们调用 emit() 方法时，绑定在该事件上的所有监听器都会被执行。在上述示例中，会输出 "事件被触发了！"。
结论
ES6 的事件处理机制使得处理和管理 DOM 事件变得更加便捷，其中 EventTarget 和 EventEmitter 分别提供了事件追踪和事件管理的功能。这项功能的使用，能够让我们更加方便的开发前端的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fbaaf14471362601605ca0