2020/08/29

【これだけ】JavaScriptのイベントリスナー【現役エンジニアが解説】

PROGRAM

今回は、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という関数を代入し呼び出す関数を登録する方法と、””とすることで呼び出す関数を削除する方法になります。

• facebook
• Tweet
• Read Later