如何在 ES6 中实现事件触发与监听
在前端开发中，事件是非常常见的一种机制。它可以让 DOM 对象与 JavaScript 代码进行交互，实现一些动态交互的效果。而在 ES6 中，我们通过类的实例化来实现事件的触发与监听。
触发事件
在 ES6 中触发事件的代码如下：
-- -------------------- ---- ------- ----- ------------ - ------------- - ------------- - --- - --- - ---- - ------ -------- --------- - ---- - ------ -------- ---- - ----- -- --------------- ----- - ----- ------ - ------------------------- -- -------- - ----- --- - -------------- --- ---- - - -- - - ---- - -- -- - -------------------------------- ------ - - - -- --- -展开代码
以上示例代码中的 EventEmitter 类是我们通过 ES6 的类实现的事件类。在该类中，我们通过定义 emit 方法来触发事件。该方法的第一个参数为事件的名称，第二个参数为该事件传递的参数。方法内部会根据事件名称来遍历当前事件列表，并调用回调函数。
监听事件
监听事件是许多开发人员熟悉的概念。在 ES6 中，我们可以通过如下代码来实现事件的监听：
-- -------------------- ---- ------- ----- ------------ - ------------- - ------------- - --- - --- - ------ - ------ -------- --------- - ---- - ------ ---------- -- - ---- - ------ -------- --- - ------- -- ------------- --- ---- - -- --------------------------- - ------------------------ - --- - ------------------------------- --- ---- --- - -- --- -展开代码
以上示例代码中的 on 方法是我们通过 ES6 实现的一个监听方法。在该方法中，我们可以传递三个参数。第一个参数为监听的事件的名称，第二个参数为回调函数，我们的事件类将会在事件触发后执行该函数。对于第三个参数，我们可以指定回调函数的上下文，也可以让它取默认值。
完整实现
以下是一个完整实现事件触发与监听的示例：
-- -------------------- ---- ------- ----- ------------ - ------------- - ------------- - --- - --- - ------ - ------ -------- --------- - ---- - ------ ---------- -- - ---- - ------ -------- --- - ------- -- ------------- --- --- - ----- - -- --------------------------- - ------------------------ - --- - ------------------------------- --- ---- --- - --- - ------ - ------ -------- --------- - ---- - ------ ---------- -- - ---- - ------ -------- --- - ------- -- -------------- --- --- - ----- - ----- ------ - ------------------------- -- -------- - ----- --- - -------------- --- ---- - - -- - - ---- - -- -- - -- ------------- --- -- -- ------------- --- ---- - ---------------- --- ------- - - - - --- - ---- - ------ -------- --------- - ---- - ------ -------- ---- - ----- -- --------------- ----- - ----- ------ - ------------------------- -- -------- - ----- --- - -------------- --- ---- - - -- - - ---- - -- -- - -------------------------------- ------ - - - - -- ------- ----- ----- - --- --------------- -- ---- ----------------- -------- ------ - ------------------ ----- --- ----------- ------------------ --- -- ---- ------------------- - ----- -------- ------ -- ---展开代码
在以上示例中，我们通过创建一个 EventEmitter 类，实现了完整的事件触发与监听功能。我们创建了一个事件类实例 event，并且在该实例中监听了 'click' 事件。当我们在事件类中调用 emit 方法，就可以触发事件调用回调函数。在本示例中，当 emit 方法被调用时，我们就可以在控制台输出我们监听事件时打印的数据。
结语
以上就是在 ES6 中实现事件触发与监听的方法，它可以帮助我们在前端开发时更加轻松的实现各种事件的调用。我们可以针对项目的不同需求做进一步的拓展，提供更加灵活的事件机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b811f7306f20b3a6588cf3
