javascriptイベント代理(依頼)

前に事件の代理人と接触したことがありますが、印象は深くありません.今回は覚えて印象を強くします.
みんなによくあるコードを使って例を挙げます.
html dom構造:

<ul id="ul1">

   <li>001</li>

   <li>002</li>

   <li>003</li>

</ul>

  ：       li      。js    

<script>

var oUl = document.getElementById('ul1');

var aLi = oUl.getElementsByTagName('li');

for (var i = 0, i = aLi.length; i++) {

　　aLi[i].onclick = fn;

}

</script>

   従来の実装方法:各liを遍歴し、個々にイベントをクリックします.
短所:
1、もし現在のページに多くのliがあれば、例えばポータルニュースサイトのニュースリスト.遍歴が必要なら、性能に影響があります.
2、新たにliを追加したら、例えばミニブログを出す時に、先ほど送ったミニブログは、ちょうど送ったミニブログが事件を持ってくることができますか?
第2点に対して:答えは新しく作成された要素は前遍歴のイベントを持たないので、要素を作る前にすでにliを遍歴しました.すでに存在したliにイベントを加えました.
ソリューション:
上記の二つの欠点を解決するために、私達は事件代理を使って、事件依頼の方式で実現します.
事件の依頼をよりよく理解するために、まず事件に関する知識を知るべきです.ここでは、事件が起こったとは詳しくは言いません.
イベントの泡立ちや捕獲の特性により、ulにイベントをクリックすることができます.
コード:

var oUl = document.getElementById('ul1');

oUl.onclick = function(ev) {

    var ev = ev || event;

    //    

    var target = ev.target || ev.srcElement;

　　//  li  

    if (target.nodeName.toLowerCase() == 'li') {

          //li     

          fn();

     }

}

まとめ:evオブジェクトには一定の互換性がありますが、ここでの互換性の処理は難しくありません.実際には、イベント依頼の本質は、複数の要素の親レベルにイベントを追加し、泡を利用したり、次のサブ要素を捕獲し、単独でイベントをバインドします.