Event-Handling-API im Browser neben DOM?

Question

Ich war neugierig zu wissen, welche Art von Event-Handling-APIs Browser haben, und wie ich diese in einigen JavaScript-Logik verwenden konnte, die nicht mit DOM überhaupt behandelt, so gab ich Event einen Versuch.

Offensichtlich Event und CustomEvent sollen nur mit DOM verwendet werden, und ich keine andere API sehen, so dass ich am Ende ein „Dummy“ <div> Element als ein Ereignis-Handler (Eventtarget), um die Erstellung zu kommunizieren zwischen zwei Teilen des Codes, so etwas wie:

// 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')) 

Dies funktioniert, aber wie Sie sehen können, habe ich ein <div> Element geschaffen, das ich gar nicht in der DOM verwenden gehen, und es nur verwenden als Ereignisbehandlungsmechanismus.

Es scheint eine Verschwendung zu sein, ein DOM-Element zu erstellen, das ich nicht als DOM-Element verwenden werde. Gibt es eine andere Möglichkeit, dies mit nativen Browser-APIs zu tun, oder müssen wir eine eigene Ereignisbibliothek erstellen (oder eine verwenden), um zu vermeiden, dass ein Dummy-Element erstellt wird?

Answer 1

Sie können JavaScript-Objekte und -Funktionen verwenden, um Ihren eigenen Ereignisbus ohne Verwendung des DOM zu erstellen.

Die Grundidee ist, dass Sie eine API für Rückrufe Registrierung und Dispatching Ereignisse definieren, wie folgt aus:

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); 
       }); 
      } 
     } 
    } 
}());