JavaScript ---事件的委派

最新推荐文章于 2022-09-20 22:11:19 发布

阿清呀.

最新推荐文章于 2022-09-20 22:11:19 发布

阅读量132

点赞数

分类专栏： javascript学习路程文章标签： javascript

本文链接：https://blog.csdn.net/wzg0817/article/details/105728406

版权

javascript学习路程专栏收录该内容

48 篇文章 0 订阅

订阅专栏

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应事件来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能。

target：
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            var lis = document.getElementsByTagName("li");
            var u1 = document.getElementById("u1");
            var btn = document.getElementById("btn");
            // for (var i = 0; i < lis.length; i++) {
            //     lis[i].onclick = function() {
            //         alert("我是超链接");
            //     }
            // }

            u1.onclick = function(event) {
                //解决event浏览器兼容性问题
                event = event || window.event;
                //如果触发的事件是我们期望的元素，否则不执行。
                //创建一个正则表达式，判断一下含有link的class才能被触发。
                var patt1 = /[link]/ig;
                if (patt1.test(event.target.className)) {
                    alert("我是超链接");
                }

            }


            btn.onclick = function() {
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript: ;'class='link'>新的超链接</a>";
                u1.appendChild(li);

            }
        }
    </script>
</head>

<body>
    <button id="btn">点击</button>
    <ul id="u1">
        <li><a href="javascript:;" class="s link s">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
    </ul>

</body>

</html>