什么是 event-target-shim？
event-target-shim 是一个 NPM 包，它提供了一个 EventTarget 类的 polyfill 实现。EventTarget 是 web 标准中用于处理事件的接口，它被许多浏览器 API 实现，包括 DOM、Worker 和 Service Worker 等。但是，某些环境（比如 Node.js）并没有原生实现 EventTarget 接口。event-target-shim 可以在这些环境中提供 EventTarget 的兼容性支持。
安装和使用
你可以使用 npm 安装 event-target-shim：
npm install event-target-shim
然后在你的代码中导入它：
import EventTarget from 'event-target-shim';
或者在 CommonJS 模块中使用 require：
const EventTarget = require('event-target-shim');
接下来，你就可以创建一个 EventTarget 实例，并添加事件监听器了：
const eventTarget = new EventTarget(); eventTarget.addEventListener('myevent', function(event) { console.log(`Received ${event.type} event`); }); eventTarget.dispatchEvent(new Event('myevent')); // 输出：Received myevent event
深入理解
event-target-shim 实现了标准的 EventTarget 接口，并且提供了一些额外的功能。以下是一些值得注意的细节：
绑定 this 到事件监听器函数
当你使用 addEventListener() 绑定事件监听器时，你可以指定回调函数执行时的 this 对象。这对于使用 ES6 类创建事件监听器非常有用。
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ------------------------------ ------------------------- - -------------- - ------------------------ - - ----- ------ - --- ----------- ------------------------ ---------------- -- -----------展开代码
支持传递数据到事件监听器
在原生的 EventTarget 接口中，你可以通过创建自定义的事件对象并将它传递给 dispatchEvent() 方法来传递数据到事件监听器：
const event = new CustomEvent('myevent', { detail: { message: 'Hello!' } }); eventTarget.addEventListener('myevent', function(event) { console.log(event.detail.message); }); eventTarget.dispatchEvent(event); // 输出：Hello!
event-target-shim 可以直接将数据作为参数传递给 dispatchEvent() 方法，而不需要先创建一个自定义事件对象：
eventTarget.addEventListener('myevent', function(message) { console.log(message); }); eventTarget.dispatchEvent('myevent', 'Hello!'); // 输出：Hello!
支持跨域通信
当你在浏览器环境下使用 EventTarget 时，它可以与其他窗口或 iframe 进行跨域通信。但是，在 Node.js 等环境下，这种功能是不支持的。event-target-shim 通过向事件对象添加 origin 属性来实现跨域通信：
-- -------------------- ---- ------- ----- ----- - --- ---------------------- - ------- - -------- -------- -- ------- --------------------- --- --------------------------------------- --------------- - ---------------------------------- -- - ------- --------------------- --- --------------------------------- -- ---------展开代码
支持 Promise
在原生的 EventTarget 接口中，你无法将 Promise 对象作为回调函数传递给 addEventListener()。但是，在 event-target-shim 中，你可以使用 Promise 作为回调函数并捕获异步事件：
-- -------------------- ---- ------- ----- ----------- - --- -------------- ----- -------- ------------------ - --------------------- ----- -------- - ------------------------------------------ ------------------ --------------------------------------- ----- - -------- ---- -- -------- -- -------------------- ----------- -------------- -- ---------------------- --------- ------------展开代码
总结
event-target-shim 是一个帮助开发者在
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41612
