JavaScript

JavaScriptでイベントリスナーを追加・削除する方法

React等が流行ろうとも、JavaScriptとは切っても切れない関係にある”イベントリスナー”。

JavaScriptで要素がクリックされた際の処理等を実装するには必要不可欠な存在です。
今回は、そんなイベントリスナーを追加・削除する方法について解説していきます。

【前提】イベントリスナーとは？

イベントリスナーは、簡単にいうと「イベント専用の監視センサー」と考えるのがイメージしやすいかもしれません。

監視センサーにイベントが引っかかれば、それに応じて規定の処理を返します。クリックされたときにアラートを出したり、マウスを乗せたときに画像を大きくしたり、イベントリスナーはユーザの操作によって発生する様々なイベントが起きるのを、今か今かと待ち構えています。

WEBサイトに高度な処理を実装したいと考えるなら、イベントリスナーの取り扱いを覚えておきましょう。また、より専門的な内容について知りたい方は、以下のMDNのリファレンスを確認することを推奨します。

addEventListener() / MDN

イベントリスナーを追加する方法

JavaScriptでイベントを追加する際には、addEventListener( )という関数を使います。

基本的な書き方は以下の通りです。

対象のオブジェクト.addEventListener(イベントの種類, 実行したい処理);

他にも指定できる引数のデータはありますが、ひとまずイベントリスナーの設置は上記のコードだけで完了します。

例えば、以下のコードをHTMLファイルのbodyタグ内に記述すると、ボタンを押した際にアラートが流れます。

<!-- ボタン -->
<button type="button" id="button">ボタン</button>

// イベントリスナーから実行する関数
function clicked(){
    alert("イベントが発生");
}

// 対象の要素を取得
// (今回はbutton要素)
let button = document.getElementById("button");

// イベントリスナーを追加
button.addEventListener("click", clicked);
// clickした際に定義しておいた関数clickedが呼び出される

jQueryを使う場合

jQueryを使う場合は、addEventListener()でイベントを設置していた部分を、以下のコードに置き換えるだけでOKです。

$("#button").click(clicked);

記述が非常にシンプルになっているのを見ればわかるように、jQueryはこういったイベントリスナーの取り回しを効率化する面では優秀ですね。

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

JavaScriptでは、addEventListener( )を用いて設置したイベントリスナーを削除する関数として、removeEventListener( )が用意されています。

少し名前は長くなりましたが、addの部分がremoveに置き換わっているだけです。基本的な記述方法も、addEventListenerとあまり変わりません。

例えば、前の段落でご紹介したaddEventListenerの関数clickedを、以下のコードに書き換えてみてください。

function clicked(){
    alert("イベントが発生");

    // イベントリスナーを削除
    button.removeEventListener("click", clicked);
    // addEventListenerと同じ引数を指定しておく
}

すると、一度目は先ほどと同じようにアラートが表示されますが、それ以降は一切アラートが表示されなくなります。これは、removeEventListenerによって、設置されていたイベントリスナーが削除されたからです。

回数制限のあるユーザからの操作に対して、回数制限に達したことを通知した後にイベントリスナーを削除するなど、色々と使い道はありそうですよね。

jQueryの場合

jQueryでイベントを削除する場合は、以下のようにoff( )という関数を使います。

$("#button").off();

「これでイベントリスナーは削除できます！」…と言いたいところですが、実はこの方法ではaddEventListenerで設置したイベントを消すことはできません。

jQueryを使って、以下のように設置したイベントであれば、off( )を用いて削除することが可能です。

$("#button").click(clicked);

理由はややこしいので詳しく説明しませんが、jQueryは通常のイベントリスナーとは少し違った形でイベントを検知を行っているため、JavaScriptとjQueryのイベントリスナーをごちゃ混ぜにするのは、あまりおすすめしません。

まとめ

JavaScriptのイベントリスナーは、

• addEventListener()
• removeEventListener()

の2種類の関数を使い、追加・削除を行うことが可能です。ただし、特にこだわりがなければ、基本的にはjQueryを用いた方がコードの可読性は高まるので、可能であればjQueryの記法で記述することをおすすめします。