HTML DOMのremoveEventListener()メソッドとは？構文と使い方を実例付きで解説
removeEventListener()メソッドとは
HTML DOMのremoveEventListener()メソッドは、HTMLドキュメント内の要素に登録されたイベントハンドラーを削除するためのメソッドです。addEventListener()で追加したイベントリスナーを、不要になったタイミングで解除したい場合に使用します。
構文
removeEventListener()メソッドの基本構文は以下のとおりです。
element.removeEventListener(event, function, useCapture);
各パラメータの意味は次のとおりです。
- event：削除するイベントの名前（例：click、mouseover など）
- function：削除対象として登録されている関数
- useCapture：イベントハンドラーを削除するフェーズを指定する真偽値（省略可能）
useCaptureにtrueを指定するとキャプチャリングフェーズで登録されたイベントハンドラーが、falseを指定するとバブリングフェーズで登録されたイベントハンドラーが削除されます。省略した場合はfalseが適用されます。
なお、removeEventListener()でイベントハンドラーを削除するには、addEventListener()で登録した際と同じ関数への参照を指定する必要があります。無名関数として登録したイベントハンドラーは削除できない点に注意しましょう。
使用例
以下は、removeEventListener()メソッドを使ってイベントハンドラーを削除する具体例です。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-size:1.2rem;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.mycolor{
background-color: #db133a;
}
</style>
</head>
<body>
<h1>DOM removeEventListener() method Demo</h1>
<button class="btn hover-btn">Hover on me</button>
<button onclick="remove()" class="btn">Remove Event Handler</button>
<script>
var hoverBtn=document.querySelector('.hover-btn');
function toggleFun(){
hoverBtn.classList.toggle("mycolor");
}
hoverBtn.addEventListener('mouseover',toggleFun);
function remove(){
hoverBtn.removeEventListener('mouseover',toggleFun);
}
</script>
</body>
</html>実行結果
このコードを実行すると、次のような画面が表示されます。
まず「Hover on me」ボタンにマウスを乗せると、ボタンの背景色が切り替わるのが確認できます。次に「Remove Event Handler」ボタンをクリックして、「Hover on me」ボタンからイベントハンドラーを削除します。
イベントハンドラーが削除された後は、ボタンにマウスを乗せても背景色は変化しなくなります。
まとめ
removeEventListener()メソッドを使うことで、動的に追加したイベントハンドラーを柔軟に解除できます。特に、要素が画面から消えるタイミングやページ遷移の前など、不要になったイベントリスナーを適切に削除することで、メモリリークの防止やパフォーマンスの向上につながります。
-
HTML DOMのtouchcancelイベントとは？構文とサンプルコードを解説
touchcancelイベントとはHTML DOMのtouchcancelイベントは、1つ以上のタッチイベントが中断されたときに発生します。たとえば、指で画面に触れている最中にブラウザがスクロールなどのジェスチャーを検出したり、システム側がタッチ処理をキャンセルしたりした場合に発火します。注意：このイベントはタッチ対応デバイス（スマートフォンやタブレットなど）でのみ機能します。マウスのみを使用するPC環境では発生しないため、実装時にはその点を考慮しておきましょう。構文touchcancelイベントの設定方法は、HTML属性を使う方法とJavaScriptを使う方法の2種類があります。HTML属
-
HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説
HTML DOMのtouchstartイベントは、ユーザーがタッチスクリーンに指を触れた瞬間に発生するイベントです。スマートフォンやタブレットなど、タッチ操作に対応したデバイスで動作するWebアプリケーションを開発する際に重要な役割を果たします。注意：このイベントはタッチ対応デバイス（モバイル端末やタッチパネル搭載PCなど）でのみ発生します。マウスのみの環境では動作しないため、必要に応じてmousedownイベントとの併用も検討しましょう。touchstartイベントの構文HTML属性で指定する場合ontouchstart = eventFunction()JavaScriptで指定する場合e