JavaScript

jQueryでイベントリスナの登録

はじめに

jQueryはJavaScriptのライブラリの一つです。
DOM要素をCSSセレクタを使って簡単に取得できることが特徴的です。
今回は取得したDOM要素にイベントを登録する方法を説明します。

on() / off()

イベントを登録するためにonメソッドを使用し、イベントを削除するためにoffメソッドを使用します。
Documentationより引数は次の通り。

.on(events [, selector][, data], handler)

.off(events [, selector][, handler])

詳しくは後のコードで説明しますが、簡単な引数の説明をします。

onメソッドについて、selectorはデリゲーションのために使うもので、dataはイベント発生時のデータの受け渡しのために使います。

offメソッドについて、selectorはデリゲーションのために使うもので、handlerは特定のハンドラを解除する際に用います。

他にもイベントリスナの登録と削除をするメソッドは存在しますが(bind()/unbind(), live()/die(), delegate()/undelegate())、jQuery3からは非推奨のようです。(atokaさんよりご指摘いただきました。ありがとうございました。)

http://api.jquery.com/category/deprecated/deprecated-3.0/

実際のコードを見ながら説明します。

index.htmlの解説

まずscriptタグを用いてjqueryを読み込みます。
その後ろで要旨したJavaScriptのファイルを読み込みます。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta lang='en'>

        <script src='jquery-3.2.1.min.js'></script>
        <script src='script.js'></script>

        <title></title>
    </head>
    <body>
        <div class='foo'>foo</div>
        <div class='bar'>bar</div>
        <div class='baz'>baz</div>
        <div class='qux'>
            <div class='delegate'>delegate</div>
        </div>
    </body>
</html>

script.jsの解説

まずDOM構築後でないとイベントリスナを登録することはできないため、$(function(){})を使用します。
次にCSSセレクタを用いてDOM要素を選択した後、bindを使用してイベントの登録を行います。
fooクラスは一つのイベントリスナを登録する時、barクラスは複数のイベントリスナを登録する時の記述方法です。
bazクラスはbarクラスのイベントリスナを削除しています。
quxクラスにイベント登録を行うが、その子要素であるdelegateクラスのdiv要素にイベントが発生した場合にのみイベントが着火するデリゲーションというものを行っています。

script.js
$(function() {
    $('.foo').on('click', function() {
        $(this).text('Hello!');
    });

    $('.bar').on({
        'mouseover': function() {
            $(this).text('Hi!');
        },
        'mouseout': function() {
            $(this).text('Bye!');
        }
    });

    $('.baz').on('click', function() {
        $('.bar').off('mouseout');
    });

    $('.qux').on('click', '.delegate', function() {
        alert('event delegate');
    });
});

専用のイベントリスナ登録メソッド

この方法の他に専用のメソッドも定義されています。
箇条書きになってしまいますが、利用可能なイベントを載せておきます。

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseout
  • mouseover
  • mouseleave
  • mouseenter
  • keydown
  • keypress
  • keyup
  • change
  • blur
  • focus
  • focusin
  • focusout
  • select
  • submit
  • resize
  • scroll
  • load
  • unload
  • error

使い方は以下のようになります。
js
$('.foo').click(function(event) {
// 処理を書く
});

データを引数に渡す方法

イベント発生時にデータを引数に渡す方法もあります。
方法は以下の通りで、渡したオブジェクトの参照がevent.dataに格納されます。
ちなみに登録するコールバック関数自体の引数にデータを渡すことはできません。

// onを使う場合
$('.foo').on('click', {num: 100}, function(event) {
    console.log(event.data.num); // 100
});

// 専用イベントハンドラ登録メソッドを用いる場合
$('.foo').click({num: 100}, function(event) {
    console.log(event.data.num);  // 100
});

参考文献