JavaScript removeEventListenerで設定したイベントを削除する

環境
Google Chrome  115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit

書式
ターゲット名.removeEventListener(イベント名,コールバック関数)
removeEventListener関数を使ってイベントを削除します。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
removeEventListener() は EventTarget インターフェイスのメソッドで、
以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。
removeEventListener() は EventTarget インターフェイスのメソッドで、 以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。
removeEventListener() は EventTarget インターフェイスのメソッドで、
以前に EventTarget.addEventListener() で登録されたイベントリスナーを取り外します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<button id="btnadd">追加</button>
<p>
<button id="btndel" onclick="test()">除去</button></p>
<script>
// イベントで実行する関数
function funA(){ console.log('test data') }
// イベント登録
btnadd.addEventListener('click', funA);
// イベントを除去
function test(){
btnadd.removeEventListener('click', funA)
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <button id="btnadd">追加</button> <p> <button id="btndel" onclick="test()">除去</button></p> <script> // イベントで実行する関数 function funA(){ console.log('test data') } // イベント登録 btnadd.addEventListener('click', funA); // イベントを除去 function test(){ btnadd.removeEventListener('click', funA) } </script> </body> </html>
<!DOCTYPE html>
<html>
<body>

<button id="btnadd">追加</button>
<p>
<button id="btndel" onclick="test()">除去</button></p>


<script>
// イベントで実行する関数
function funA(){ console.log('test data') }

// イベント登録
btnadd.addEventListener('click', funA);  

// イベントを除去
function test(){
  btnadd.removeEventListener('click', funA)
}

</script>

</body>
</html>

実行結果
「追加」ボタンを押下すると、イベントを登録します。
「除去」ボタンを押下すると、イベントを除去します。

JavaScript

Posted by arkgame