裏紙に書く程度の内容

jQuery デリゲートについて学びましょう

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

eventデリゲートについて学びましょう

についてです。

デリゲートとは

デリゲートとは、簡単に言うと”処理”の”委譲”です。

何かイベントが発火した際、それを検知したオブジェクト自ら処理を行うのでななく、誰かに任せてしまうって感じです。

具体的にコードを見た方がわかりやすいかも。

デリゲートの例

以下のようなhtmlがあるものとします。

<ul id='my-list'>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
</ul>

やりたいこととして、<li>要素がクリックされた時に何か処理をしたい。

何も考えずに書く場合

これをデリゲートを使わずに書くと

$('#my-list li').click(function() {
    console.log('clicked : ' + $(this).text());
});

となります。簡単ですね。

これを今度はデリゲートを使って書き直します。

デリゲート例(ニュアンスだけ)

元記事と同じような修正だと以下のようになります。

$('#my-list').click(function(e) {
    console.log('clicked : ' + $(e.target).text());
});

これでほぼ同じように動作します。
本来の各liでのclickを、親である#my-listのイベントで処理するようになっています。

ニュアンス的にはデリゲートしたのと同じことですが、厳密にいうとデリゲートではありません。

あくまで#my-listのイベントとして発火し、その中でクリックされた対象を見つけ出し、処理しています。
これは、発火、検知・処理はすべて同じオブジェクト内でのことなので、先の説明文とは違っていますね。

また、このコードにはバグが含まれています。
#my-listのクリックイベントなので、#my-listのパディング部分をクリックしても発火してしまいます。

デリゲート例(delegate()を使う)

jQueryではver. 1.4.2で、delegate()が追加されました。

※1.7以降不要になります。(後述)

これを使って書き直してみます。

$('#my-list').delegate('li', 'click', function() {
    console.log('clicked : ' + $(this).text());
});

これも#my-listで発火するのですが、処理をliに委譲します。その為、liで発火するように見えます。

#my-listパディング部をクリックしても委譲先はないためスルーされます。

デリゲート例(on()を使う)

jQueryではver. 1.7で、on()が追加されました。

これは前述delegate()の機能も包括するため、これ以降のバージョンではon()を使うのがいいでしょう。

$('#my-list').on('click', 'li', function() {
    console.log('clicked : ' + $(this).text());
});

先程のdelegate()とは引数の順番が変わっています。

動作としてはdelegate()と同じです。

on()のいいところは、なんだかいっぱいあったイベント定義のメソッドを全て包括してしまうところです。
これで、live()だのclick(),focus()だのの書き方が統一されます。
そうすると、引数の順番とかややこしいことが減ってすっきりします。

デリゲートすると何が嬉しいの?

デリゲートのメリットとしては2点。

イベント定義の節約

前述のclick()で各li要素に対してイベントを定義する場合、全てのliの分だけイベントが準備されてしまいます。

一方、デリゲートを利用した場合は#my-listに対してのイベントが準備されるだけなので、リソースの節約になります。

動的に追加した要素でも動作する

デリゲートを使用しない場合、ajax等により動的に追加される要素(前述の例ではli)にはイベントが定義されていません。
その為、要素追加後、再度イベントを設定してやる必要があります。

その点、デリゲートを使用する場合はあくまで親要素(前述例#my-list)のイベントが動作するため、動的に追加された要素でも再度イベント定義する必要がありません。

結論

デリゲートは必須知識。

Index