<ul id = "lists">

         <li>列表1</li>

         <li>列表2</li>

         <li>列表3</li>

         <li>列表4</li>

         <li>列表5</li>

         <li>列表6</li>

 </ul>

var lists = document.getElementById("lists");

        lists.addEventListener("click",function(event){

            var target = event.target;

            //防止父元素ul也触发事件

            if(target.nodeName == "LI"){

               target.style.backgroundColor = "red";

            }

        })

$(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");}

            })

        })