除了用于DOM之外，浏览器中的事件处理API

Question

我很想知道浏览器有什么类型的事件处理API，以及如何在一些根本不处理DOM的JavaScript逻辑中使用这些API，所以我尝试了Event。

显然，Event和CustomEvent只用于DOM，我看不到任何其他API，所以我最终创建了一个"伪"<div>元素作为事件处理程序（EventTarget），以便在代码的两部分之间进行通信，比如：

// shared file
export
let eventHandler = document.createElement('div')
// ... some other file
import {eventHandler} from './sharedFile'
eventHandler.addEventListener('foobar', function(event) {
  console.log('foobar event fired!')
})
// ... some other file
import {eventHandler} from './sharedFile'
console.log('About to trigger "foobar" event.')
eventHandler.dispatchEvent(new Event('foobar'))

这是可行的，但正如您所看到的，我已经创建了一个<div>元素，我根本不打算在DOM中使用它，只将其用作事件处理机制。

创建一个我不打算用作DOM元素的DOM元素似乎是一种浪费。有没有其他方法可以使用本机浏览器API来实现这一点，或者我们必须创建自己的（或使用）事件库来避免创建虚拟元素？

Answer 1

您可以使用javascript对象和函数创建自己的事件总线，而无需使用DOM。

基本思想是，您可以定义一个API来注册回调和调度事件，如下所示：

var EventBus = (function() {
    var listeners = {};
    return {
        'addEventListener': function(eventName, callback) {
            if (!listeners[eventName]) {
                listeners[eventName] = [];
            }
            listeners[eventName].push(callback);
        },
        'dispatchEvent': function(event) {
            if (listeneres[eventName]) {
                listeners[event.name].forEach(function(callback) {
                    callback(event);
                });
            }
        }
    }
}());