事件委托例子

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

run物细wu声

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

阅读量325

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_40561617/article/details/108649729

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件委托机制：利用事件冒泡的原理，把本应该添加给某元素的事件委托给他的父级（外层）。
二、例子
假如有一个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="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 oUl=document.getElementsByTagName('ul')[0];
			var oLi=document.getElementsByTagName('li');
			// for(let i=0;i<oLi.length;i++){
			// 	oLi[i].οnclick=function(){
			// 		console.log(oLi[i].innerHTML);
			// 	}
			// }
			
			// 事件委托
			oUl.onclick=function(e){
				var evt=e||event;
				var _target=evt.target||evt.srcElement//获得事件源
				if(_target.nodeName.toUpperCase()=="LI"){
					console.log(_target.innerHTML)
				}
			}
			
			//先给其增加5个li
			for(let i=0;i<5;i++){
				var nLi=document.createElement('li');
				nLi.innerHTML=i;
				oUl.appendChild(nLi);
			}
		</script>
	</body>
</html>