API обработки событий в браузере, кроме DOM?

Question

Мне было любопытно узнать, какие браузеры API обработки событий имеют и как я могу использовать их в некоторой логике JavaScript, которая вообще не имеет отношения к DOM, поэтому я дал 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); 
       }); 
      } 
     } 
    } 
}());