addEventListener Befestigung nicht an der richtigen Umfang

Question

I der nativen DOM bin mit addEventListener Ereignis wie folgt:

const domElement = document.getElementById('ember464'); 
domElement.addEventListener('click', dosomething); 
this._listeners.push({target: domElement, type: 'click', callback: dosomething}); 

dies das Ereignis registriert und speichert sie in einem Array _listeners so kann es später gereinigt werden. Die gute Nachricht ist, dass dieses Ereignis an das DOM-Ereignis angehängt wird, obwohl das Ziel eindeutig auf die einzelne Schaltfläche beschränkt ist. Der Handler scheint zu zünden, wenn ein Klick erkannt wird irgendwo auf dem Dokument!

Mache ich etwas falsch?

p.s. hier ist der Browser-Inspektor Blick auf die _listener Array ... Beachten Sie, dass die Hervorhebung der "Ziel" zeigt tatsächlich nur auf die Schaltfläche, die ich versuche zu targetieren. AKA, das Ziel ist der DOM-Knoten und nicht der Selektor, der zum Identifizieren des Knotens verwendet wird.

---

Ich habe jetzt im Debugger auf dem angestrebten DOM-Element sah, und ich sehe die folgenden:

---

Für alle, die mutig genug, hier ist ein Arbeitsdemonstration des Codes. Die zweite Schaltfläche wird durch den „Klick“ ausgelöstes Ereignis ist das Thema dieser Ausgabe:

https://ui-animate.firebaseapp.com/

Der vollständige Quellcode ist hier: link

Answer 1

Ok, das Problem war, in einem ein bisschen Code, den ich in der Frage nicht dargestellt hatte. Moderner Browser unterstützt alle die DOM-Methode addEventListener aber um älteren Browser zu unterstützen, die nur attachEvent haben hatte ich die folgende Abstraktion hinzugefügt:

registerListener(target, type, callback) { 
    const addListener = target.addEventListener || target.attachEvent; 
    const eventName = target.addEventListener ? type : 'on' + type; 

    addListener(eventName, callback); 
}, 

Das Problem dabei ist, dass der „this“ Kontext, in dem Ruf verloren. Also habe ich stattdessen folgendes geändert:

registerListener(target, type, callback) { 
    const listenerFunction = target.addEventListener ? 'addEventListener' : 'attachEvent'; 
    const eventName = target.addEventListener ? type : 'on' + type; 

    target[listenerFunction](eventName, callback); 
},