委任イベントとjqueryのdelegateメソッド

イベントバブルのプロパティを使用して、親エレメントにイベントをバインドし、イベントオブジェクトを判断して、すべての子エレメントに直接イベントをバインドするのではなく、親エレメントの各子エレメントにイベントを追加します.

<ul>



  <li></li>



  <li></li>



  <li></li>



</ul>

各liバインドイベントに:

li.addEventListener('click',function(){console.log(this)});

Liバインドイベントを委任するには、次の手順に従います.

ul.addEventListener('click',function(e){

   if(e.toElement.tagName=='li'){

       console.log(this);

       return false

   }

})

後者は1回のイベントのみをバインド、前者よりも性能的に優れている.
 
jqueryでは、より強力な関連メソッドが提供されています.delegate

    var ul= $('ul');

    ul.delegate('li','click',function(e){

        console.log(e);

        console.log(this);

    })

このように追加されたイベントは,動的に追加されたliであってもイベントをトリガーすることができる.