原生js中的事件委托(为新添加的DOM元素添加事件)

最新推荐文章于 2023-09-07 13:48:39 发布

nuc_八道门

最新推荐文章于 2023-09-07 13:48:39 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/nuc_badaomen/article/details/76077891

前端开发专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用原生JS中的事件委托技术为动态添加的DOM元素绑定事件。具体讲解了利用addEventListener方法监听点击事件，并通过event.target获取被点击元素，进而实现对新增元素的有效操作。

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

原生js中的事件委托(为新添加的DOM元素添加事件)
作用：

事件委托可以为新添加的DOM元素动态的添加事件

js中的addEventListener方法
语法:

document.addEventListener('click',function(event){
	var target = event.target;     //通过console.log(event)查看有target属性
									//target属性(就是我们点击的这个元素标签对象)
									//parentNode是父级标签对象
									//nodeName是标签名字
	if(target.nodeName == "A"){
		//判断我们点击的是A标签
		//发起ajax
		id=target.getAttribute('num');
		xhr.open('get','http://www.test.com/delete.php?id='+id,true);
		xhr.send();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				val=xhr.responseText;
				if(val==1){
					obj=event.target.parentNode.parentNode; //找到tr标签
					obj.style.display='none'; //隐藏
				}
			}
		}
	}
})