Ellquent JavaScriptのremoveEventListenerの例

Question

次のスクリーンショットで、誰かがbutton.removeEventListener（ "click"、once）に "once"という関数を渡さなければならない理由を説明できますか？ removeEventListenerメソッドは2つの引数を必要とするため、単に渡しますか？さらに、「一度」関数もremoveEventListenerメソッドに渡された場合、「完了」はコンソールログに複数回ログされないことは奇妙に思えます。

let button = document.getElementById("button"); 
 

 
function once() { 
 
    console.log("Done"); 
 
    button.removeEventListener("click", once); 
 
} 
 
button.addEventListener("click", once);

<button id="button">once</button>

Answer 1

あなただけの特定のハンドラを（ここでのように、あなたがアンバインドonceハンドラです）バインド解除したいときは、2番目のパラメータとしてそれを渡す必要があり、そうでない場合はJSはないだろう削除するハンドラを知っている。

各イベントに複数のハンドラをバインドすることができます。

また、 "once"関数もremoveEventListenerメソッドに渡された場合、「完了」はコンソールログに何度も記録されていないことは奇妙に思えます。

これが1回だけ呼び出された理由です。関数onceの参照を渡しているので、JSはバインドを解除するハンドラを認識しています。 removeEventListenerに電話をしたときに電話をかけることはありません。

ボタンをクリックすると関数が呼び出されます。ハンドラではconsole.logがあります。すぐに後でクリックするとその関数は呼び出されません。

Answer 2

javascriptの複数のイベントを同じアクションの要素にバインドできます。

バインドされたイベントから特定のハンドラを削除する場合は、そのハンドラ関数名をremoveEventListenerに渡す必要があります。 removeEventListenerに2番目の引数を渡さないと、そのイベントのそのアクションのすべてのハンドラが削除されます。

あなたのケースでは、自分自身の中からハンドラonceを削除しています。説明するために別のハンドラと

例：removeEventListener

Answer 3

上

function firstListener(e) { 
 
    console.log('firstListener'); 
 
} 
 

 
function secondListener(e) { 
 
    console.log('secondListener'); 
 

 
    // this will remove `firstListener` handler from subsequent button clicks 
 
    e.target.removeEventListener('click', firstListener); 
 
} 
 

 
// bind first event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', firstListener); 
 

 
// bind second event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', secondListener);

<button id="btnMultiEvent">Multiple Event Button</button>

もっと私はASCIIコード表で説明しましょう：

   | script start | nothing happens | once() execute | nothing happens | 
---------------|--------------|-----------------|----------------|-----------------| 
"click" Events | once() added | once() waiting | once() removed |     | 
       | lala() added | lala() waiting | lala() waiting | lala() waiting | 

機能ララ一度と同じで、クリックイベントから自己を削除します。