在前端开发中，我们经常需要在页面上对 DOM 进行操作和监听事件。针对这种需求，有一个非常强大的 npm 包——objecteventtarget，它可以方便地对对象实现事件监听和分发。
安装
要使用 objecteventtarget 包，需要在命令行中输入以下命令安装：
npm install objecteventtarget
安装完成之后，就可以在项目中引用该包了。
使用
objecteventtarget 包提供了一个 EventTarget 类，我们可以实例化这个类来创建一个事件对象。
const EventTarget = require('objecteventtarget');
// 实例化一个事件对象
const evt = new EventTarget();接下来，我们就可以对这个事件对象进行事件监听和分发了。
事件监听
使用 objecteventtarget 包提供的 addEventListener() 方法可以在事件对象上监听特定类型的事件。
// 监听事件
evt.addEventListener('click', function(evt) {
console.log('click event', evt);
});这个方法接受两个参数：
- type（必需）：要监听的事件类型，可以是自定义的事件类型或者 DOM 中定义的事件类型。
- listener（必需）：事件处理程序，当事件类型匹配时，会调用这个函数。
在监听事件时，可以使用一个可选的第三个参数，设置事件处理程序的执行顺序。如果不指定这个参数，默认是按照添加到事件目标中的顺序执行。
事件分发
使用 objecteventtarget 包提供的 dispatchEvent() 方法可以在事件对象上分发特定类型的事件。
// 分发事件
evt.dispatchEvent(new CustomEvent('click', {detail: 'hello world'}));这个方法接受一个事件对象作为参数，事件对象中必须的参数是 type，表示事件类型。除此之外，还可以在事件对象中传入自定义数据，例如上面示例代码中的 {detail: 'hello world'}，可以在事件处理程序中获取到这个数据。
事件取消
如果要在事件处理程序中取消事件，可以使用 preventDefault() 方法。例如：
// 监听事件，取消事件
evt.addEventListener('click', function(evt) {
console.log('click event', evt);
evt.preventDefault();
});“取消”事件并不是真的阻止事件的发生，而是阻止浏览器默认的行为。例如，如果在点击链接的处理程序中调用了 preventDefault() 方法，那么浏览器就不会打开链接。
示例代码
这里提供一个完整的示例代码，帮助更好地理解 objecteventtarget 包的使用。
-- -------------------- ---- ------- ----- ----------- - ----------------------------- -- ------- ----- --- - --- -------------- -- ---- ----------------------------- ------------- - ------------------ ------- ----- --- -- ---- --------------------- -------------------- -------- ------ ----------
指导意义
objecteventtarget 包提供了非常方便的事件监听和分发功能，可以帮助我们更好地处理前端开发中的各种事件。在实际项目中，我们可以根据需要自定义事件类型，实现更加灵活的事件处理。此外，还可以根据实际需求，为事件处理程序传递自定义数据，方便我们对页面元素进行更精确的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a67053