js,jq.事件代理（事件委托）複習。

<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