关于JS中的事件委派

　　在介绍JS中事件委派之前先来看看一个简单的需求：为每一个超链接绑定一个单击响应函数并在控制台打印一句话，内容是：” a 标签的单击响应函数“。下面是这个需求的代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script>
        //  需求：为每一个超链接绑定一个单机响应函数
         window.onload = function() {
            // 获取页面中所有的 a 标签
            var allA = document.getElementsByTagName('a');
            for(var i = 0; i < allA.length; i++) {
                allA[i].onclick = function() {
                    console.log('我是 a 的单击响应函数');
                }
            }
         }
     </script>
 </head>
 <body>
     <ul id="ul">
         <li><a href="javascript:;">超链接1</a></li>
         <li><a href="javascript:;">超链接2</a></li>
         <li><a href="javascript:;">超链接3</a></li>
     </ul>
 </body>
 </html>

　　在此需求上升级，现在要做的是点击添加按钮，并追加一个 ul 的子元素 li。被新添加进去的 li 也能触发事件方法，下面是具体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            var ul = document.getElementById('ul');
            var allA = document.getElementsByTagName('a');
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                //    创建一个li标签 
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:;" class="link">新添加的超链接</a>';
                ul.appendChild(li);
            }
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = function () {
                    console.log('我是 a 的单击响应函数');
                }
            }
        }
    </script>
</head>

<body>
    <button id="btn">点击添加</button>
    <ul id="ul">
        <li><a href="javascript:;">超链接1</a></li>
        <li><a href="javascript:;">超链接2</a></li>
        <li><a href="javascript:;">超链接3</a></li>
    </ul>
</body>

</html>

在浏览器打开，点击添加一个子元素，可以看到之前循环绑定事件的函数不管用了，被新添加的元素不会触发 onclick 事件方法，这里就涉及到事件委派了。

　　事件委派：将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能event中的target表示的触发事件的对象，使用它对触发事件的元素进行判断。

　　我现在的需求是：只需要绑定一次事件并可以应用到多个元素上，即使元素是后添加的，也能触发这个事件方法。具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 需求：为每一个li绑定一个函数 -->
    <button id="btn">点击添加超链接</button>
    <ul id="ul" style="background-color: pink">
        <li><a href="javascript:;" class="link">超链接1</a></li>
        <li><a href="javascript:;" class="link">超链接2</a></li>
        <li><a href="javascript:;" class="link">超链接3</a></li>
    </ul>
    <script>
        window.onload = function () {
            var ul = document.getElementById('ul');
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                //    创建一个li标签 
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:;" class="link">新添加的超链接</a>';
                ul.appendChild(li);
            }
            var allA = document.getElementsByTagName('a');

            ul.onclick = function (event) {
                if (event.target.className == 'link') {
                    alert(`我是a`);
                }
            }

        }    
    </script>
</body>

</html>

target 返回目标元素，表示触发事件的对象。

关于JS中的事件委派

猜你喜欢