HOME > > > > >

.delegate()

.delegate( selector, eventType, handler )

引数

(string)selector
(string)eventType
(function)handler

戻り値

(object)jQuery

イベントハンドラを設定する。1.7からは.on()に集約されたので今後は出番が減っていくとおもわれます。

結果だけみると.live()との違いはありませんが、パフォーマンスで優位にたっている模様。普通の書き方した場合、

Javascript

  1.  
  2. $('a').live('click', function() { blah() });
  3. $(document).delegate('a', 'click', function() { blah() });
  4.  

という感じで、$(a)のコストが無駄になる。document以外に設定する場合は

Javascript

  1.  
  2. $('a', $('#container')[0]).live(...);
  3. $('#container').delegate('a', 'click', function() { alert('That tickles!') });
  4.  

こんな感じ。今後は.on()でいくわけだけど、現在のイベントハンドラ設定関連のメソッドの違いは

・パフォーマンスは delegate > live > bind で優れていて
・DOM操作耐性は live > delegate >> bind
・実行順序は bind > delegate > live

jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記

とのこと。下記ページにわかりやすく書いてあります。

サンプル

実行結果


Javascript

  1. $('.jqTest1').delegate('.catcher', 'click', function(e){
  2.     $('.jqTest1 .screen').append(
  3.         '[delegate]<br />',
  4.         'target className : ' + $(e.target).attr('class') + '<br />',
  5.         'currentTarget className : ' + $(e.currentTarget).attr('class') + '<br />'
  6.     );
  7. });

HTML

  1. <div class="jqTest1">
  2.     <div class="catcher">
  3.         <button class="execute">click me</button>
  4.     </div>
  5.     <hr />
  6.     <div class="screen"></div>
  7. </div>

設定時には存在しないイベント発生源となる要素についても利用できる。

サンプル

実行結果


Javascript

  1. $('.jqTest2').delegate('.catcher', 'click', function(e){
  2.     $('.jqTest2 .screen').append(
  3.         '[delegate]<br />',
  4.         'target className : ' + $(e.target).attr('class') + '<br />',
  5.         'currentTarget className : ' + $(e.currentTarget).attr('class') + '<br />'
  6.     );
  7. });
  8.  
  9. $('.jqTest2 .add').on('click', function(e){
  10.     $('.jqTest2 .catcher').append($('<button>', {
  11.             class: 'execute' + $('.jqTest2 .catcher button').length,
  12.             text: 'click me ' + $('.jqTest2 .catcher button').length
  13.         }));
  14. });

HTML

  1. <div class="jqTest2">
  2.  
  3.     <div class="catcher">
  4.         <button class="execute">click me</button>
  5.     </div>
  6.  
  7.     <button class="add">add</button>
  8.     <hr />
  9.     <div class="screen"></div>
  10.  
  11. </div>

.delegate( selector, eventType, eventData, handler )

.delegate( selector, events )

参照サイト