js 的委托事件

   

   

   

$("#ulBox").on('click','li',function(){ 

      console.log($(this).attr("data-id"));

})

on()事件相当于是$(document).click(function(){if(点击的是btn){}})，给document添加了一个click事件，党点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。

$(function(){

            $("#lists").delegate("li","click",function(event){

                var target = $(event.target);

                target.css("background-color","red");

            })

        })

1  $(function(){2            $("#lists").bind("click","li",function(event){3                var target = $(event.target);4                if(target.prop("nodeName")=="LI"){5                target.css("background-color","red");}6            })7        })

bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM