JS事件委托

事件委托从字面意思上理解就是把事件委托给别人做。这样有什么好处呢？设想一下，一个ul里有很多li，现在要给每一个li都添加点击事件，就需要循环给li添加事件，这样性能会很差。这时候就可以使用事件委托解决。先了解下他的原理：利用事件冒泡，把子元素的事件添加到父元素上，触发事件执行。
需要注意的地方在下面的demo里都注释出来了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>点我</li>
        <p>点我没用</p>
        <li>点我</li>
        <p>点我也没用</p>
        <li>点我</li>
    </ul>
    <script>
        var oUl = document.getElementById("list");
        oUl.onclick = function(event){
            event = event || window.event;
            //获取事件源(需要考虑兼容,前者标准浏览器,后者IE)
            var target = event.target || event.srcElement;
            console.log(target.nodeName);
            //这里注意获取到的nodeName的值全为大写
            if (target.nodeName == "LI") {
                alert("hello");
            }
        };
        //使用事件委托写鼠标移入移出事件时不能使用onmouseenter和onmouseleave，
        //因为他俩不支持事件冒泡
        oUl.onmouseover = function(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName == "P") {
                target.style.background = "green";
            }
        };
        oUl.onmouseout = function(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName == "P") {
                target.style.background = "";
            }
        };
    </script>
</body>
</html>

JS事件委托

推荐阅读更多精彩内容