.delegate( selector, eventType, handler )
引数
- (string)selector
- (string)eventType
- (function)handler
イベントハンドラを設定する。1.7からは.on()に集約されたので今後は出番が減っていくとおもわれます。
結果だけみると.live()との違いはありませんが、パフォーマンスで優位にたっている模様。普通の書き方した場合、
Javascript
$('a').live('click', function() { blah() });
$(document).delegate('a', 'click', function() { blah() });
という感じで、$(a)のコストが無駄になる。document以外に設定する場合は
Javascript
$('a', $('#container')[0]).live(...);
$('#container').delegate('a', 'click', function() { alert('That tickles!') });
こんな感じ。今後は.on()でいくわけだけど、現在のイベントハンドラ設定関連のメソッドの違いは
・パフォーマンスは delegate > live > bind で優れていて
・DOM操作耐性は live > delegate >> bind
・実行順序は bind > delegate > live
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
とのこと。下記ページにわかりやすく書いてあります。
サンプル
Javascript
$('.jqTest1').delegate('.catcher', 'click', function(e){
$('.jqTest1 .screen').append(
'[delegate]<br />',
'target className : ' + $(e.target).attr('class') + '<br />',
'currentTarget className : ' + $(e.currentTarget).attr('class') + '<br />'
);
});
HTML
<div class="jqTest1">
<div class="catcher">
<button class="execute">click me</button>
</div>
<hr />
<div class="screen"></div>
</div>
設定時には存在しないイベント発生源となる要素についても利用できる。
サンプル
Javascript
$('.jqTest2').delegate('.catcher', 'click', function(e){
$('.jqTest2 .screen').append(
'[delegate]<br />',
'target className : ' + $(e.target).attr('class') + '<br />',
'currentTarget className : ' + $(e.currentTarget).attr('class') + '<br />'
);
});
$('.jqTest2 .add').on('click', function(e){
$('.jqTest2 .catcher').append($('<button>', {
class: 'execute' + $('.jqTest2 .catcher button').length,
text: 'click me ' + $('.jqTest2 .catcher button').length
}));
});
HTML
<div class="jqTest2">
<div class="catcher">
<button class="execute">click me</button>
</div>
<button class="add">add</button>
<hr />
<div class="screen"></div>
</div>
.delegate( selector, eventType, eventData, handler )
.delegate( selector, events )