背景介绍
在网页的前端开发中，经常会遇到需要添加事件监听的情况，例如点击、鼠标移动等。在传统的做法中，为了实现全局事件监听，需要针对每一个需要添加监听的元素都单独注册事件。但是，当需要监听的元素较多时，这种做法就不够方便。
针对这个问题，我们可以使用 global-event-handler 这个 npm 包来实现全局事件监听。 global-event-handler 可以将事件监听器添加到一个单独的祖先元素上，从而可以在该祖先元素下面的所有子元素中捕获事件。这样，我们就可以更加方便地实现全局事件监听。
安装和使用
安装 global-event-handler 的命令如下：
npm install global-event-handler
在需要监听全局事件的网页中，添加如下代码：
import GlobalEventHandler from 'global-event-handler';
// 监听全局点击事件
const clickHandler = new GlobalEventHandler(document);
clickHandler.on('click', (event) => {
console.log('点击了 ' + event.target);
});在上面的代码中，我们实例化了一个 GlobalEventHandler 对象，并将 document 传递给该对象，表示我们要在整个文档中监听事件。然后，使用 on() 方法注册事件监听器，该方法接受两个参数：事件类型和回调函数。在本例中，我们监听了 click 事件，并在回调函数中打印了被点击的元素。
原理介绍
在使用 global-event-handler 时，我们首先需要实例化一个 GlobalEventHandler 对象，并将需要监听事件的元素传递给该对象。在对象内部，GlobalEventHandler 将会创建一个单独的元素，成为监听器元素，该元素位于所传递的元素的最顶层。监听器元素会捕获所有的子元素事件，并将其转发给 GlobalEventHandler 对象。当有事件被转发时，GlobalEventHandler 对象会将其封装成一个标准事件对象，并调用回调函数。在回调函数中，我们可以访问 event.target 属性，以获得触发事件的元素。
示范代码
下面我们来举一个更加具体的例子。假设有一个包含了多个按钮的页面，我们需要监听所有按钮的点击事件。传统的做法需要为每一个按钮单独添加事件监听器。但是，使用 global-event-handler，我们可以通过很少的代码实现该功能。具体代码如下：
<!-- HTML 代码 --> <div id="container"> <button>按钮一</button> <button>按钮二</button> <button>按钮三</button> </div>
-- -------------------- ---- -------
-- ---------- --
------ ------------------ ---- -----------------------
-- --------
----- ------------ - --- -----------------------------
-- ----------------
------------------------ ------- -- -
-- ----------------
-- --------------------- --- --------- -
---------------- - - ------------------------
-
---在上面的代码中，我们首先实例化了一个 GlobalEventHandler 对象，然后在对象中使用事件代理的方式，监听每一个按钮的点击事件。在回调函数中，我们通过判断触发事件的元素是否是按钮，来确定是否要执行该回调函数。
总结
使用 global-event-handler，我们可以很方便地实现全局事件监听的功能。可以减少代码冗余，并且可以更加清晰地组织代码。希望读者可以通过本文，学习到使用 global-event-handler 的方法，并能够在实际项目中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e70255dee6beeee7462