js事件的委派

最新推荐文章于 2024-04-03 12:14:33 发布

喵俺第一专栏

最新推荐文章于 2024-04-03 12:14:33 发布

阅读量498

点赞数

分类专栏： # Html+css+js项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dengfengling999/article/details/122676250

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

知识点：

事件的委派：

指将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能

例子：

点击按钮添加超链接，点击超链接提示内容

<!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>
    <script>
        window.onload = function () {

            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class='link''>新建超链接</a>";
                //将li添加到ul中
                ul.appendChild(li);
            };

            /*
             为每一个超链接都有绑定一个单击响应函数,这种操作比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的
             超链接必须重新绑定

             我们希望，只绑定一次事件，既可以应用到多个元素上，即使这些元素时后添加的
             我们可以尝试将其绑定给元素的祖先元素
            */
            //获取所有a
            var allA = document.getElementsByTagName("a");
            //遍历a
            /*  for (var i = 0; i < allA.length; i++) {
                 allA[i].onclick = function () {
                     alert("woshi dd");
                 };
             } */

            //

            //为ul绑定一个单击响应函数
            ul.onclick = function (event) {
                event = event || window.event;//解决兼容性
                //如果触发事件的对象是我们期望的元素a标签，则执行否则不执行
                //target属性  event.target表示触发事件的对象
                if (event.target.className == "link") {
                    alert("dd");
                }
            };

        };
    </script>
</head>

<body>
    <button id="btn01">添加超链接</button>
    <div id="ul">
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </div>
</body>

</html>

喵俺第一专栏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js事件的委派

知识点：事件的委派：指将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能例子：点击按钮添加超链接，点击超链接提示内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv
复制链接

扫一扫