Olay işleme API'sı?

Question

Tarayıcıların ne tür olay yürütme API'lerinin olduğunu ve bunların DOM ile hiç ilgilenmeyen bazı JavaScript mantığında nasıl kullanabileceğimi merak ettim, bu yüzden Event'u denedim.

Görünüşe

, Event ve CustomEvent sadece DOM ile kullanılmak üzere içindir ve herhangi bir diğer API görmüyorum, bu yüzden iletişim kurmak amacıyla bir olay işleyicisi (EventTarget) gibi "kukla" <div> unsuru oluştururken sona erdi iki kod parça, gibi bir şey arasında:

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

Bu çalışır, ancak gördüğünüz gibi, ben hiç DOM kullanmak için gitmiyorum bir <div> elemanı oluşturulan ve sadece kullanmak ettik Bir olay işleme mekanizması olarak.

DOM öğesi olarak kullanmayacağım bir DOM öğesi oluşturmak için bir atık gibi görünüyor. Yerli tarayıcı API'ları ile yapmanın başka bir yolu var mı, yoksa kukla bir öğe oluşturmamak için kendi (veya bir) kitaplığımız mı oluşturmamız gerekiyor?

Answer 1

DOM'ı kullanmadan kendi etkinlik veriyolunuzu oluşturmak için javascript nesnelerini ve işlevlerini kullanabilirsiniz.

temel fikir böyle olayları geri aramalar kayıt ve sevk için bir API tanımlayabilirsiniz olmasıdır:

ben bunu kendimiz uygulamak gerektiğini düşünmüştüm,

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