事件委托

    <script>
        //事件委托：  本质是利用冒泡
        //使用：涉及到重复的同一件事情，不许每一个都单独处理了，只需要交给他们的父集进行处理

        var myUl = document.getElementById("myUl"),
            oLis = myUl.getElementsByTagName("li");
            

        // // 性能不好
        // for(var i = 0;i<oLis.length;i++){
        //     oLis[i].onclick  = function(){
        //         this.style.backgroundColor = "blue";
        //     }
        // }


        myUl.onclick = function (ev) {
            // 事件对象
            ev = ev || window.event;

            // 事件源的兼容处理
            var target = ev.target || ev.srcElement;

            // console.log(target);
            //只是点击li改变颜色
            if (target.nodeName.toLowerCase() === "li") {
                target.style.backgroundColor = "blue";
            }
            
            if (target.nodeName.toLowerCase() === "h2") {
                target.style.backgroundColor = "pink";
            }
        }
    </script>
</body>

</html>