Brandon Aaron「jQueryでイベント委譲（Event Delegation）」

Brandon Aaronによる2010.3.4のブログエントリ

コンパクトにまとまったエントリ
「さらば.live()。今は.delegate()がお洒落」を真に受けてた自分の目を覚ましてくれたよい記事

Event delegationの実装はjQueryだと快適にできる
jQuery 1.4.2時点では、jQuery使ったevent delegation実装の選択肢は３つ
- .live()
- .delegate()
- 自力でゴリゴリ
おさらい：event delegation
- 発火したイベントを親要素〜祖先要素へと伝播させること（イベントをbubble upさせること）を利用する
- イベントのbubble upを利用すると、100個のエレメントへイベントハンドラをセットする代わりに１つのエレメントにセットするだけで済ませることができるようになる。
- 現在DOMツリーにあるエレメントだけでなく、オンザフライで生成・挿入されたエレメントに対しても、クリックしたときにセットしたい処理を自動的に割り当てされる。

例を使ってevent delegationの効用説明

テーブルの各行がクリックしたら何かイフェクトを追加したいとする
- 例えばセルの背景色をハイライト
よくある実装は、.bind()の利用
- このタイプの実装は、セルの数が増えたら（数十、数百）になったらどうする？
  - 各trにイベントがセットされることになる。
  - tr要素の数の増減とかを監視し続けないといけなくなる。そのためのコードも必要

$('tr').bind('click', function(event) {
    // this == tr element
});

event delegationを使った実装
- クリックイベントを各tr要素ではなく親要素であるtableにセット
  - 親・祖先要素だったら何でもいい。body要素でもhtml要素でもwindowオブジェクトでもいい。
- tr要素で発生したクリックイベントをtable要素までbubble upさせる
- どのtr要素がクリックされたのかは捕捉される。
event delegationが使える理由２つ
- セットされるハンドラの数を最小化
  - 全てのtr要素にセットから、table要素１つだけにセットへ
- 動的なデータのハンドリングに向いてる
  - 生成されたtr要素のクリックイベントも「自動的に」捕捉される。

.live()でevent delegation

$('tr').live('click', function(event) {
    // this == tr element
});

$('tr',"div#wrapper")//第二引数にコンテキストを指定（空欄だとdocumentオブジェクト＝コンテキスト）
    .live('click', function(event) {
    // this == tr element
});

$('#myContainer').children('table').find('tr').live('click', function(event) {
    /*** 動かない ***/
});

.live()でevent delegation

$('table').delegate('tr', 'click', function(event) {
    // this == tr element
});

//これは動く
$(#myContainer').children('table').delegate('tr', 'click', function(event) {
    // this == tr element
});

自力でゴリゴリevent delegation

$('table').bind('click', function(event) {
    // this == table element
    var $tr = $(event.target).closest('tr');
});

まとめ（各手法の使い所）

.live()使え
- 手早くevent delegationしたいとき
- メソッドチェーンできなくてもいいとき
- ハンドラをセットしたいオブジェクトがdocumentオブジェクトでいいとき
.delegate()使え
- メソッドチェーン使いたいとき
- .live()よりももう少し自由度高いほうがいいとき
自力でゴリゴリやれ
- 最大限の自由度と柔軟性を享受しながらevent delegationしたいとき