JS事件委托精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41459434/article/details/83059220

整理了一些关于js事件委托的内容

事件委托又称事件代理，主要利用了js事件冒泡的性质。在父元素上绑定一个事件，对子元素操作时，事件会冒泡到父元素上被处理。

作用

1）减少对DOM的操作次数。

比如一个ul里有10个li，如果直接对li增加click事件，对DOM就是操作10次，而使用事件委托，只对ul绑定事件，对DOM操作就是1次。
DOM操作次数越多，页面交互就绪前的时间就越多，所以用事件委托可以优化页面性能。

2）减少内存占有

页面上绑定的每个函数都会占用内存，使用事件委托可以用更少的内存实现相同的功能，优化页面性能。

具体实现

刚接触事件委托时最直接的一个问题就是委托在父元素上的事件会通过父元素本身的交互触发。比如在ul上绑定了clcik事件，我只希望在点击li时触发，点击ul时不要触发，该怎么处理呢？
这里可以使用Event对象，可以显示触发当前事件的DOM，IE需要使用event.srcElement.nodeName，其它浏览器使用event.target.nodeName。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="test">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <script>
        window.onload = function(){
            let test = document.getElementById("test");
            test.onclick = function(event){
                let target = event.target || event.srcElement;
                if(target.nodeName.toLowerCase() === 'li'){
                    alert(target.innerHTML);
                }
            }
        }
    </script>
</body>
</html>