js事件委托例子

最新推荐文章于 2022-01-21 11:40:46 发布

会长大的菜鸟

最新推荐文章于 2022-01-21 11:40:46 发布

阅读量466

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_42370505/article/details/108938957

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt" />
		<button id="add">添加</button>
		<ul id="box">
			<li>dada<button>删除</button></li>
			<li>dad<button>删除</button></li>
			<li>sgtsg<button>删除</button></li>
			<li>tsts<button>删除</button></li>
			<li>thrh<button>删除</button></li>
		</ul>
		<script type="text/javascript">
			var add = document.getElementById("add");
			var txt = document.getElementById("txt");
			var ul = document.getElementById("box");
			add.onclick = function() {
				var ac = txt.value;
				var li = document.createElement("li");
				li.innerHTML = `<li>${ac}<button>删除</button></li>`
				ul.appendChild(li);
			}
			//这里用到了事件委托，通过操作父元素，也可以操作子元素，包括新增的元素
			ul.onclick = function(e) {
				if (e.target.tagName == "BUTTON") {
					e.target.parentNode.remove();
				}
			}
		</script>

	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会长大的菜鸟

关注关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="txt" /> <button id="add">添加</button> <ul id="box"> <li>
复制链接

扫一扫