5.2.2. removeeventlistenerでイベントリスナーを削除する方法

removeEventListenerでイベントリスナーを削除する方法

• はじめに JavaScriptのDOM操作とイベント処理について学びましょう。今回は、「イベントリスナーの設定と削除」の節の「removeEventListenerでイベントリスナーを削除する方法」について見ていきましょう。

イベントリスナーを削除するってどうやるの？

removeEventListener メソッドを使って削除できるんだよね？

そうなの！ removeEventListener メソッドを使って、不要になったイベントリスナーを削除できるの！

• removeEventListenerでイベントリスナーを削除する方法

イベントリスナーを削除するには、 removeEventListener メソッドを使って、イベント名と削除したい関数を指定するの。ただ、注意点があって、削除したい関数は名前付き関数である必要があるの。例えば、こんな感じ！

const buttonElement = document.querySelector('#myButton');

function handleClick() {
    console.log('Button clicked!');
}

buttonElement.addEventListener('click', handleClick);
buttonElement.removeEventListener('click', handleClick);

なるほど、 removeEventListener メソッドでイベント名と削除したい関数を指定するんだね！

そうなの！この例では、 click イベントのイベントリスナーを追加した後にすぐに削除しているの！

• イベントリスナー削除の注意点

匿名関数じゃだめなの？

残念だけど、匿名関数は removeEventListener で削除できないの。だって、同じ匿名関数を再度指定することができないから、削除するときにどの関数を削除すべきか分からなくなっちゃうの。

• おわりに JavaScriptのremoveEventListenerメソッドを使って、イベントリスナーを削除することができます。ただし、削除する関数は名前付き関数である必要があります。これで、不要になったイベントリスナーをきちんと削除できるようになりましたね！😀