事件委托例子

最新推荐文章于 2022-03-18 22:03:33 发布

run物细wu声

最新推荐文章于 2022-03-18 22:03:33 发布

阅读量299

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40561617/article/details/108649729

版权

本文介绍了JavaScript的事件委托机制，通过利用事件冒泡原理，将事件处理函数绑定到父级元素，以实现对子元素的高效管理和动态添加元素后的事件处理。以一个具体的例子展示：在ul列表中，通过事件委托，确保新增的li元素也能响应点击事件。

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

一、事件委托机制：利用事件冒泡的原理，把本应该添加给某元素的事件委托给他的父级（外层）。
二、例子
假如有一个ul列表，里面有5个li，每个li都有对应的点击事件，如下代码所述，当我们继续给这个ul增加5个li时，希望新增加的li也有当前ul中li的点击事件。


```javascript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li{
				background-color: red;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<script>
			var oLi=document.getElementsByTagName('li');
			for(let i=0;i<oLi.length;i++){
				oLi[i].onclick=function(){
					console.log(oLi[i].innerHTML);
				}
			}
		</script>
	</body>
</html>

上述代码的效果如下图所示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200917181814502.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDU2MTYxNw==,size_16,color_FFFFFF,t_70#pic_center)
再给其添加5个li，并进行事件委托，将点击事件委托给ul实现。具体实现，捕获事件源，当事件源等于li时，执行相关操作，具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset<

最低0.47元/天解锁文章

run物细wu声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫