【これだけ】JavaScriptのイベントリスナー【現役エンジニアが解説】
今回は、JavaScriptのイベントリスナーについて、登録の方法と削除の方法に分け、簡単に解説していきます。
イベントリスナーの登録の方法
イベントリスナー関数を登録するには、ターゲットとなる要素のaddEventListener()メソッドを使います。
addEventListener()メソッドの第一引数にはイベントの型、第二引数にはイベント発生時に呼び出す関数を指定します。
var onHogeClick = function() { // クリック時の処理 } var element = document.getElementById("hoge"); element.addEventListener("click",onHogeClick);
上記のコードでは、”hoge”というIDを持つ要素に対し、onHogeClickというイベントリスナー関数をclickイベントに登録しています。
イベントリスナーの削除の方法
addEventListner()メソッドで登録したイベントリスナーは削除可能です。
削除には、ターゲットとなる要素のremoveEventListener()メソッドを使い、第一引数にイベントの型、第二引数に登録した関数を指定します。
element.removeEventListener("click", onHogeClick);
上記のコードでは、先程の”hoge”というIDを持つ要素のclickイベントに対し登録したonHogeClickというイベントリスナー関数を削除しています。
イベントリスナー以外での方法
イベントリスナー以外にもイベント発生時に関数を呼び出す方法はあります。
それはターゲットとなる要素のonclick等のイベント属性のプロパティに関数を直接代入する方法です。
// clickイベントを登録する場合 element.onclick = onHogeClick; // clickイベントを削除する場合 element.onclick = "";
上記のコードは、先程の”hoge”というIDを持つ要素のonclick属性のプロパティに対し、onHogeClickという関数を代入し呼び出す関数を登録する方法と、””とすることで呼び出す関数を削除する方法になります。