Javascript事件代理の真理

参考資料:js-イベントエージェント
長い間、事件の発生と事件の代理はあまり区別がないような気がします.
最近、また見ましたが、違いは本当に大きくないです.どうやって理解しますか?
事件の代理とは何かを明らかにするには、まず代理とは何かを明確にする必要があります.
商业の角度から言って、代行はつまり:私は商品があって、あなたは商品がなくて、しかしまた私は时间がなくて、すべて売る気力がなくて、あなたの一日の暇な卵はかわいがって、ただ时间だけが残りました.そこで、私はあなたに頼んで買ってください.そしてお兄さんはあなたに引渡しします.この過程で、あなたは実際に商品を持っています.
OKです.文面から事件代理という言葉の意味を理解するにはどうすればいいですか?後文にいわく
まず真実を見てください.新米バインディングイベントの例です.
前の私に従ったら、どのように各liタグを付けて、onlickを追加しますか?私なら、きっと簡単で乱暴です.それぞれのliを循環して、その後全部onlickを結合します.
それで私のコードはこうなるべきです.

   
001
   
002
   
003



    var thl= document.getElementById('thl');
    var aLi = thl.getElementsByTagName('li');
    for (var i = 0; i < aLi.length; i++) {
    　　aLi[i].onclick = fn;
    }
    
    function fn (){
      console.log("maomaoliang");
    }

大丈夫そうです.しかし、一部の文章はこのようにとても性能を消耗すると言いますが、私はまたコンピュータが良くて、老子はあなたの性能を管理して、あまりにまじめになることができません.
突然ある日、私はjsを通じて追加された新しいliを発見しました.

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

それから、maomaoliangをクリックして、私のonlickを結合していませんでした.なぜですか?えっと、もとは私の元からあるliと私の後で生成するliはまったく同時に発生するのではありませんて、新しいli元素を創建する前に、すでに存在のliに事件を加えました.はい、お願いします.
三、どうやって破れますか
それから、また良い(无)奇(奈)のはいくつか文章を见て、もとは1つの事件の代行のものが使うことができます.試してみます.部分コードを書き換えました.このように:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
    ev = ev || event;
    //    
    var target = ev.target || ev.srcElement;
　　//  li  
    if (target.nodeName.toLowerCase() == 'li') {
          fn();
     }
};

function fn (){
  console.log("maomaoliang");
}

その結果、新しいliをクリックすると、なんとfn関数もトリガされます.まあ、好奇心に駆られている身として、よく分かりません.やはり落ち着いて、この中の奥秘をはっきりさせなければなりません.
そこで、事件代理の資料を見ました.
まず、どのようなイベントが泡立ちますか?元素上のイベントが触発された時、例えばマウスがボタンを押した時、同じイベントがその元素のすべての祖先元素の中で触発されます.この過程は事件の泡が立つと言われています.
そして、前の問題に戻り、「事件の代理という言葉の意味をどう字面で理解するか」ということで、誰が事件を代理しましたか?それとも事件が誰を代理しましたか?本文の例で言えば、変更後のコードを見てください.私はオンリロック事件をリタグの上に結び付けました.そこで、どのliタグをクリックしても(動的に生成されたものでも前からあったものでも)、このイベントは泡のように、噴き出します.私はここでulにonlickを縛っていますので、この時、ulは泡が出てきたonclick事件を捕まえます.
次に、 var target = ev.target || ev.srcElement;という言葉は、私に教えてくれたのと同じです.私が注文したのは誰ですか?誰がtargetですか?このtargetがliタグif (target.nodeName.toLowerCase() == 'li')である場合、fn関数が実行される.
最後に、私は誇らしげにその質問に答えました.ulラベルはonlick事件を代理しました.
四事件代理の手順を思い出してください.

親要素バインディングイベント

父要素は、実際に起こった事件の目標を知っています.

ターゲットを判断します.私たちが必要な要素であれば、コールバック関数が発生します.
最後にまとめて、事件代理の二つのメリット

性能は不注意で最適化されました.

動的に追加された要素は、イベントを結合することもできます.
六注意すべき点は
上記は元のjsイベントのバインディングに対して、jqueryを使っています.コードを次のように変更しました.

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
    ev = ev || event;
    //    
    var target = ev.target || ev.srcElement;
　　//  li  
    if (target.nodeName.toLowerCase() == 'li') {
          //li     
          fn();
     }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
  console.log("maomaoliang");
}

$("#ul1").click(function(){
    fn();
});

このようにして、新しく追加したliラベルもclickを縛ることができます.とても便利で、簡単です.jsを勉強して卵用がないと感じますか?はは、このように考えるのはとても正常で、私も前にこのように思って、しかし、いくつかのものをした後に、jqueryがまた本当に足りないことを発見します!でも、基本は十分です.大神さんたちはjsを勉強したいと言いますが、jqueryを勉強してからjsを勉強してもいいと思います.
おかみさん、糸をくわえた痛みが分かりませんでした.-.