<ul id="ulBox">
? ? <li data-id="1"></li>
? ? <li data-id="2"></li>
? ? <li data-id="3"></li>
</ul>
$("#ulBox").on('click','li',function(){?
? ? ? console.log($(this).attr("data-id"));
})
on()事件相當(dāng)于是$(document).click(function(){if(點擊的是btn){}})龙考，給document添加了一個click事件，黨點擊的是btn，事件冒泡原理芜赌，從里到外朽色，就相當(dāng)于點擊了document颁股，那么就會執(zhí)行后面的操作派昧，本質(zhì)上只給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實現(xiàn)方法一樣，當(dāng)父元素代子元素執(zhí)行事件時由桌，父元素也會觸發(fā)事件为黎，所以我們需要判斷一下觸發(fā)事件的元素名。此外行您，用bind()方法給元素綁定事件的時候要注意铭乾，它只能給已經(jīng)存在DOM元素添加事件，不能給未來存在DOM
