JavaScript之事件的委派

最新推荐文章于 2024-06-10 17:00:16 发布

极客研究者

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量282

点赞数

分类专栏： JavaScript 文章标签： js javascript dom event

本文链接：https://blog.csdn.net/qq_34550459/article/details/105787356

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

事件的委派:
将事件统一绑定到元素共有的祖先元素,当后代元素的事件触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件

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

Demo:

<!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>事件的委派</title>
    <style>
        *{
            padding:0px;
            margin: 0px;
        }

        ul{
            width: 300px;
            height:100px;
            background-color: #bfa;
        }
    
    </style>
    <script>
    window.onload=function(){

       var aLinkUlNode=document.getElementById('aLinkUl');
       var count=0;
       var addLinkBtn=document.getElementById('addLink');
        addLinkBtn.onclick=function(){
          //debugger;
          //获取ul下的li节点的个数
           var liCollection=aLinkUlNode.getElementsByTagName('li');
           var len=liCollection.length;

            var liNode=document.createElement('li');
            liNode.innerHTML="<a href='javascript:;' class='link'>超链接"+(len+1)+"</a>";
            aLinkUlNode.appendChild(liNode);
        }

       /*
       这里我们为每个超链接绑定都绑定一个单击响应函数
       这种操作只能为页面初始化时已存在的元素绑定,新添加的必须重新绑定
       */
        aLinkUlNode.onclick=function(event){

            event=event||window.event;
            //event.target 获取触发事件的元素对象
            if(event.target.className=="link"){//根据指定的属性值进行判断,是否是期望的触发对象
                alert(event.target);
                 alert('a标签响应函数!');
            }
           
        }

    //    var aNodeCollection=  document.getElementsByTagName('a');
    //     for(var i=0;i<aNodeCollection.length;i++){
    //         aNodeCollection[i].οnclick=function(){
    //             alert('a标签响应函数!');
    //         }
    //     }
    }
    </script>
</head>
<body>
        <button id="addLink">添加超链接</button>
        <ul id="aLinkUl">
            <p>P段落</p>
            <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>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之事件的委派

事件的委派:将事件统一绑定到元素共有的祖先元素,当后代元素的事件触发时,会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件事件的委派是利用了冒泡,通过委派可以减少绑定的次数,提高程序的性能Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录