のaddEventListenerはそうは以下のように、私はネイティブのDOMの<code>addEventListener</code>イベントを使用しています右スコープに

Question

を取り付けていません。このイベントはDOMにアタッチされますが、ターゲットは明らかに単一のボタンに限定されていますが、ハンドラはクリックが検出されたときにいつでも起動するようです。どこでもドキュメント上にあります。

何か間違っていますか？

p.s.ここではブラウザの検査官が_listener配列を見ています... "ターゲット"を強調表示することは、実際に私がターゲットにしようとしているボタンだけを指していることに注意してください。 AKA、ターゲットはノードを識別するために使用されるセレクタではなく、DOMノードです。

---

私は今目標とDOM要素でデバッガを見ていると私は、以下を参照してください。勇敢な人のため

---

を、ここですコードの作業デモ

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

完全なソースコードはここにある：link

Answer 1

[OK]を、問題はしていた第二ボタンを「クリック」イベントは、この問題の主題であるによってトリガーされます私が質問に示していないコードのビット。最近のブラウザはすべて、DOMメソッドaddEventListenerをサポートするだけattachEventを持っている古いブラウザをサポートするために、私は次のような抽象化を追加しました：

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

    addListener(eventName, callback); 
}, 

これに伴う問題は、「これ」は、文脈がコールに失われることです。代わりに私は次のように変更しました：

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

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