事件委托。-CSDN博客

本文链接：https://blog.csdn.net/xiaoChenPengYou/article/details/121193423

事件委托

通俗地来讲，就是把一个元素响应事件的函数委托到另一个元素。

我们通常想在ul标签里添加大量的事件，例如经常使用的点击事件。我们通常的写法，是为每个<a>都绑定类似onclick之类的事件监听。或者是使用for循环给连续的标签添加事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
    	  content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
    <ul id="UL">
        <li><a href="javascript:;">我是a1标签</a></li>
        <li><a href="javascript:;">我是a2标签</a></li>
        <li><a href="javascript:;">我是a3标签</a></li>
    </ul>
    <script>
        var parentNode = document.getElementById("UL");
        var aNodes = document.getElementsByTagName("a");
        for(var i=0, l = aNodes.length; i < l; i++){
            aNodes[i].onclick = function() {
                console.log(this);
            }
        }
    </script>
</body>
</html>

但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。也即是事件委托。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
    <ul id="UL">
        <li><a href="javascript:;">我是a1标签</a></li>
        <li><a href="javascript:;">我是a2标签</a></li>
        <li><a href="javascript:;">我是a3标签</a></li>
    </ul>
    <script>
        var parentNode = document.getElementById("parent-list");
        var aNodes = parentNode.getElementByTagName("a");
        for(var i=0, l = aNodes.length; i < l; i++){

            aNodes[i].onclick = function() {
                console.log('我是超链接 a 的单击相应函数');
            }
        }
    </script>
</body>
</html>