js的事件委托

顾名思义事件委托就是把自己的事情委托给别人去做,事件呢就是比如 onclick onmouseover onmouseout 可以委托到别人的身上去做。利用事件冒泡原理把事件添加到父级上来执行添加效果

好处:性能好

通常我们给一堆 li 添加事件会使用for循环添加这样添加的性能不是很好,那么事件委托就比for循环性能好,代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>aaaaaaaa</li>
        <li>bbbbbbbb</li>
        <li>33333333</li>
    </ul>
    <script>
       var ul = document.getElementById('ul');
        ul.onmouseover = function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = 'red';
            }
        }
        ul.onmouseout = function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = '';
            }
        }    
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/chefweb/p/5982625.html