JS--事件委派

最新推荐文章于 2022-09-29 08:52:09 发布

weixin_44134816

最新推荐文章于 2022-09-29 08:52:09 发布

阅读量301

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44134816/article/details/123635114

版权

<!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 btn01 = document.getElementById('btn01');
            btn01.onclick = function(){
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:;" class="link">新建链接</a>'
                ul.appendChild(li);
            }

            /*
            为每一个链接都绑定单击响应函数:
            这里我们为每一个链接绑定了单击响应函数,这种操作比较麻烦
            而且这种操作只能为已有的链接设置事件,而新增加的链接还必须重新绑定.
             */
            var ul = document.getElementById('ul');
            var allA = ul.getElementsByTagName('a');
            // for(let i=0; i<allA.length; i++){
            //     allA[i].onclick = function(){
            //         alert('我是a的单击响应函数');
            //     }
            // }

            /*
                我们希望只绑定一次事件,即可应用到多个元素上,即使元素是后添加的
                我们可以尝试将其绑定给元素共同的父元素

                事件委派
                -指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
                    从而通过祖先元素的响应函数来处理事件.
                -事件委派是利用了冒泡,通过委派可以减少事件绑定的次数提高程序的性能.
            */
            // 为ul绑定单级响应函数
            ul.onclick = function(event){
                // 解决IE8兼容性问题
                event = event || window.event;
                /*
                target:
                -event中的target表示触发事件的对象
                */
                // 如果触发事件的对象是我们期望的元素则执行,否则不执行.
                if(event.target.className == 'link'){
                    alert('这是一个单击响应函数.');
                }
                
            }
        }
    </script>
</head>
<body>
    <button id="btn01">添加连接</button>
    <ul id="ul">
        <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>
        <li><a href="javascript:;" class="link">链接4</a></li>
    </ul>
</body>
</html>

weixin_44134816

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS--事件委派

<!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>Doc
复制链接

扫一扫