事件委托

最新推荐文章于 2023-11-24 20:30:00 发布

weixin_45162984

最新推荐文章于 2023-11-24 20:30:00 发布

阅读量58

点赞数

分类专栏：前端js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45162984/article/details/110010353

版权

前端js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了事件委派的概念，它利用事件冒泡的特性来减少子元素的事件绑定，从而提高程序效率。示例中展示了如何在DOM树的公共祖先元素上绑定事件，并通过event.target判断触发事件的对象是否为指定类别的子元素（如li），以实现特定功能。这种方法可以有效减少内存消耗和事件处理的复杂性。

摘要由CSDN通过智能技术生成

/*
*事件委派是利用了冒泡，通过委派公共祖先元素事件绑定减少子元素的事件绑定次数，提升程序性能
*event.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>
    <style>
        #box {
            background-color: yellowred;
        }
    </style>
</head>
<body>
    <ul id="box">
		<li class="li">我是li</li>
		<li class="li">我是li</li>
		<li class="li">我是li</li>
    </ul >
    <script>
    		var ul = document.getElementById('box');
    		ul.onclick = function(event){
    			event = event || window.event;
    			if(event.target.className.indexOf('li') != -1){
    				alert('点击的是li')
    			}
    		}
    		
    </script>
</body>
</html>

weixin_45162984

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
复制链接

扫一扫

专栏目录