• 事件委托的使用地點
• 事件委托的原理
• jQuery中封裝耳朵事件委托

問題

將ajax請求回來的數(shù)據(jù)動態(tài)的拼接到html骨架中時，要給這些元素添加事件。

    <ul id="main">
    </ul>
    ...
    $.ajax({
       url:"",
       data:"",
       success:function(data){
           for(var i=data.length-1;i>=0;i--){
               ($("<li></li>"),{
                  class:'data[0].class'
               }).appendTo("#main");
           } 
       }
    })

可以給li直接添加onclick事件。
或者使用事件委托（event delegation）。

原理

事件委托是為父元素添加一個監(jiān)聽器，當(dāng)子元素要添加事件時，事件監(jiān)聽器會分析冒泡上來的事件，從而找到是哪一個子元素執(zhí)行的事件

基本寫法

    // 為父元素添加監(jiān)聽器...
    document.getElementById("main").addEventListener("click",function(e) {
        // e.target是被點擊的元素，如果被點擊的是li元素
        if(e.target && e.target.nodeName == "LI") {
            // 找到目標(biāo)并輸出
            console.log("這個li的id為"+e.target.id);
        }
    });

當(dāng)然，這種方法在jQuery也有封裝

    $("div").delegate("button","click",function(){
      $("p").slideToggle();
    });

div標(biāo)簽下的button標(biāo)簽被點擊時，p標(biāo)簽顯示或隱藏。