Js 事件委托

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

Jackson-p

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

阅读量175

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/jikexueyuan5555/article/details/79679463

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在一个复杂的Web应用程序中，如果我们对一个父元素的许多子元素设置点击后触发函数，一个一个设置是很费劲而消耗内存的，所以想这种用到按钮的事件（多数鼠标事件和键盘事件）要用到事件委托，即在DOM树中尽量最高的层次上添加一个事件处理程序即可。样例：

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style>
    </style>
</head>

<body>
    <ul id="list">

    </ul>
    <button id="but">点击添加</button>
    <script>
        var btn=document.getElementById("but");
        var ul=document.getElementById("list");
        btn.addEventListener('click',function(){
            var li=document.createElement('li');
            li.innerHTML="liaoliao";
            ul.appendChild(li);
        })
        ul.addEventListener('click',function(e){
            var lis=ul.querySelectorAll('li');
            for(var i=0;i<lis.length;i++)
                lis[i].index=i;
            var tar=e.target;
            if(tar.nodeName.toLowerCase()=='li')
                alert("i'm liao"+tar.index);
        });
        
    </script>
</body>

</html>

Jackson-p

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js 事件委托

在一个复杂的Web应用程序中，如果我们对一个父元素的许多子元素设置点击后触发函数，一个一个设置是很费劲而消耗内存的，所以想这种用到按钮的事件（多数鼠标事件和键盘事件）要用到事件委托，即在DOM树中尽量最高的层次上添加一个事件处理程序即可。样例：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;test&lt;/tit...
复制链接

扫一扫

专栏目录