JS笔记_事件的委派

最新推荐文章于 2023-01-17 12:14:05 发布

橘子羊

最新推荐文章于 2023-01-17 12:14:05 发布

阅读量59

点赞数

分类专栏： JS笔记

本文链接：https://blog.csdn.net/weixin_45310428/article/details/114985324

版权

JS笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

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

<body>
    <div>
        <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>
        </ul>
        <button id="btn">添加超链接</button>
    </div>
    <script>
        var btn=document.getElementById("btn");
        var ul=document.getElementsByTagName("ul")[0];
        btn.onclick=function(){
            var li=document.createElement("li")
            li.innerHTML+="<a href='javascript:;' class='link'>新的超链接</a>"
            ul.appendChild(li);
        }
        ul.onclick=function(event){
            event=event||window.event;
             // target表示触发事件的对象
            if(event.target.className=="link"){
                alert("事件委托")
            }
            
        }
    </script>
</body>

橘子羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS笔记_事件的委派

指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。<body> <div> <ul> <li><a href="javascript:;" class="link">超链接一</a></li> <l
复制链接

扫一扫

专栏目录