//常見(jiàn)的事件綁定(Jquery)
$(element).click(function(){
//do something
})
//事件委托(Jquery)
$(parents).on("click",element,function(){
//do something
})

//簡(jiǎn)單實(shí)現(xiàn)Jquery的事件委托
<ul id="oParent"></ul>
<a id="oClick" href="javascript:void(0)">click</a>
<script type="text/javascript">
var oParent=document.getElementById("oParent"),oClick=document.getElementById("oClick");
Object.prototype.on=function(ev,fn,obj){
var sClass=Object.prototype.toString.call(obj);
if(obj||sClass.indexOf("HTML")===-1){//假裝判斷一下是否需要事件委托
this.addEventListener(ev,function(e){
var e=e||window.event;
if(e.target===obj&&e.type===ev){
fn.call(e.target);//傳入目標(biāo)元素
}
},false);
}else{
this.addEventListener(ev,fn,false);
}
}
document.on("click",function(){console.log(this)},oClick); 

//a點(diǎn)擊的時(shí)候，ul都會(huì)新增一個(gè)li，新增的li都有綁定事件
<ul id="oUl">
<li><li>
</ul>
<a id="addBtn" href="javascript:void(0)" target="_self">新增li</a>
<script>
//使用常用事件綁定實(shí)現(xiàn)
$("#oUl").find("li").on("click",function(){
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
$("#oUl").find("li").on("click",function(){
//do something
})
})
//先不說(shuō)性能問(wèn)題，這樣的實(shí)現(xiàn)美觀，符合邏輯嗎
//使用事件委托實(shí)現(xiàn)
$("document").on("click","#oUl li",function(){//這里委托元素是靈活的，只要是父級(jí)就行，只是不是動(dòng)態(tài)生成（動(dòng)態(tài)生成就失去事件委托的意義了）
//do something
})
$("#addBtn").on("click",function(){
$("#oUl").append("<li></li>");
})
//這樣的代碼是不是簡(jiǎn)潔多了，解決了重復(fù)綁定的問(wèn)題

<p class="loadmore">加載更多</p>
<script type="text/javascript">
$(document).on("click",".loadmore",function(){
alert("ok")
})
</script>

<a id="test" target="_slef" href="javascript:void(0)">test</a>
<script>
$("document").on("click","#test",function(){
//do something
})
</script>