js为动态添加的元素增加事件（事件委托）

最新推荐文章于 2022-12-15 10:20:50 发布

机智的赵先生

最新推荐文章于 2022-12-15 10:20:50 发布

阅读量7.5k

点赞数 6

分类专栏： js 文章标签： javascript dom 事件冒泡

本文链接：https://blog.csdn.net/badmoonc/article/details/78259219

版权

js 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<ul id="out-ul">
		<li class="out-li">123</li>
		<li class="out-li">123</li>
		<li class="out-li">123</li>
	</ul>
	<button id="btn">添加</button>
	<script>
		document.getElementById('btn').addEventListener('click',function(){
			var htmlFragment='<li>我是新增的li</li>';
			var addLi=document.createElement('li');
			addLi.innerHTML=htmlFragment;
			outUl.appendChild(addLi);
		},false);
		var outUl=document.getElementById('out-ul')
		var outLi=outUl.getElementsByClassName('out-li');
		for(var i=0;i<outLi.length;i++){
			outLi[i].οnclick=function(){
				alert(1);
			}
		}
	</script>
</body>
</html>

比如这样，通过for循环给li添加的事件无法绑定到新增的li上边，详细的原因这里不做解释。那么这个如何解决呢，其实办法也简单，就是通过事件委托的方式去解决，直接上代码，上面的代码简单改造：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<ul id="out-ul">
		<li class="out-li">123</li>
		<li class="out-li">123</li>
		<li class="out-li">123</li>
	</ul>
	<button id="btn">添加</button>
	<script>
		var outUl=document.getElementById('out-ul')
		var outLi=outUl.getElementsByClassName('out-li');

		document.getElementById('btn').addEventListener('click',function(){
			var htmlFragment='<li>我是新增的li</li>';
			var addLi=document.createElement('li');
			addLi.innerHTML=htmlFragment;
			outUl.appendChild(addLi);
		},false);
		outUl.addEventListener('click',function(e){
			e=e || window.event;//兼容ie
			alert(e.target.innerHTML);
		}, false);
	</script>
</body>
</html>

这样一来，即便是新增的li点击事件也可以被触发了,不过在这里jquery的详细方式就不做介绍了，原生js跟jquery的解决原理其实是一样的。相信大家把原生的理解了，jquery的方式也可以很好的理解

机智的赵先生

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js为动态添加的元素增加事件（事件委托）

我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;
复制链接

扫一扫