js事件委托

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

问题

将ajax请求回来的数据动态的拼接到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）。

原理

事件委托是为父元素添加一个监听器，当子元素要添加事件时，事件监听器会分析冒泡上来的事件，从而找到是哪一个子元素执行的事件

基本写法

    // 为父元素添加监听器...
    document.getElementById("main").addEventListener("click",function(e) {
        // e.target是被点击的元素，如果被点击的是li元素
        if(e.target && e.target.nodeName == "LI") {
            // 找到目标并输出
            console.log("这个li的id为"+e.target.id);
        }
    });

当然，这种方法在jQuery也有封装

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

div标签下的button标签被点击时，p标签显示或隐藏。