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>

在浏览器中打开上部分代码，点击相应的超链接，都可以在控制台打印“我是 a 的单击响应函数”。感觉好像是够用了，哈哈哈哈，其实还没完。

在此基础上升级，现在要做的是点击添加按钮追加一个 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 事件方法，不能在控制台打印 “我是a标签的响应函数 ”，这里就涉及到事件委派了，先来看看事件委派的原理。

事件委派：将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件），这样可以只绑定一次，即可应用到多个元素上。事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能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>