<ul id = "lists"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul>

　　js委托：

var lists = document.getElementById("lists");lists.addEventListener("click",function(event){var target = event.target;//防止父元素ul也觸發事件if(target.nodeName == "LI"){target.style.backgroundColor = "red";}})

　　jq委托：

$(function(){$("#lists").on("click","li",function(event){var target = $(event.target);target.css("background-color","red");})})

　　

$(function(){$("#lists").delegate("li","click",function(event){var target = $(event.target);target.css("background-color","red");})})

　　

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

　　

bind()方法同原生的JavaScript實現方法一樣，當父元素代子元素執行事件時，父元素也會觸發事件，所以我們需要判斷一下觸發事件的元素名。此外，用bind()方法給元素綁定事件的時候要注意，它只能給已經存在DOM元素添加事件，不能給未來存在DOM

元素添加添加事件。如果要頻繁地添加DOM元素，并且給新添加的DOM元素綁定事件的話，用live(),delegate(),on()等方法。鑒于jQuery從1.7之后就不推薦live（）和delegate（）方法了，所以還是使用on（）方法。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的js,jq.事件代理（事件委托）复习。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。