事件代理

		<input type="number" class="userinfo"  placeholder="请输入学号" />
		<input type="text"  class="userinfo"  placeholder="请输入姓名" />
		<input type="text" class="userinfo"   placeholder="请输入性别" />
		<input type="number"  class="userinfo"  placeholder="请输入班级" />
		<input type="button" class="add" value="添加" />
		<input type="text" class="search" placeholder="请输入搜索内容" />
		<input type="button" class="searchBtn" value="搜索" />
		<!--根据学号排序-->
		<input type="button" class="sortbtn" value="排序" />
		<table border="" width="600">
			<tr><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>操作</th></tr>
		</table>
		<script type="text/javascript">
			//添加条目
			function getInfo(){
				var inps = document.querySelectorAll(".userinfo"),
					num = inps[0].value,
					name = inps[1].value,
					sex = inps[2].value,
					clas = inps[3].value;
					if(num=="" || name=="" || sex=="" || clas==""){
						alert("请输入完整信息");
						return "";
					}
				//es5字符串拼接方法
				//var tr = "<tr><td>"+num+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+clas+"</td></tr>";
				//es6字符串拼接方法
				var tr = `
						<tr>
							<td>${num}</td>
							<td>${name}</td>
							<td>${sex}</td>
							<td>${clas}</td>
							<td align="center"><button class="del">删除</button><button class="change">修改</button></button><button class="conf">确认修改</button></td>
						</tr>
						`
				return tr;
			}
			var add = document.querySelector(".add");
			var tab = document.querySelector("table");
			//添加条目
			add.addEventListener("click",function(){
				tab.innerHTML += getInfo();
			})
			tab
			
			//删除功能
			//事件代理,本该自己做的事情,交给别人做,这里本该监听del这按钮的事件,但是我们是监听他的祖宗的事件
			tab.addEventListener("click",function(e){
				//target代表我们点击的元素
				if(e.target.className=="del"){
					//console.log(e)
					e.target.parentNode.parentNode.remove();
				}
			})
		</script>
### JavaScript 事件代理的使用和实现 #### 基本原理 JavaScript 的事件代理基于 DOM 事件冒泡机制。当某个子元素上的事件被触发时,该事件会沿着 DOM 树向上传播至其祖先节点。因此,在父级元素上绑定事件监听器即可捕获并处理来自子元素的事件[^1]。 #### 实现方式 以下是常见的几种实现方式: 1. **DOM0 级事件处理** 使用 `element.onclick` 方法为父元素绑定事件处理器。这种方式适用于简单场景下的事件委托。 ```javascript var parentElement = document.getElementById("parent"); parentElement.onclick = function(event) { if (event.target && event.target.nodeName === "BUTTON") { console.log("Button clicked", event.target.id); } }; ``` 2. **标准事件监听器 (`addEventListener`)** 推荐使用现代浏览器支持的标准 API 来绑定事件监听器。这种方法更灵活且易于管理。 ```javascript const container = document.querySelector("#button-container"); container.addEventListener("click", function(event) { if (event.target.tagName === "BUTTON") { console.log("Clicked button ID:", event.target.id); } }); ``` 3. **动态生成元素的支持** 对于动态创建的子元素,传统的逐个绑定事件的方式无法满足需求。而事件代理可以很好地解决这一问题。通过判断 `event.target` 是否为目标类型的子元素,可以在不重新绑定的情况下响应新增加的内容[^3]。 ```html <ul id="dynamic-list"> <li>Item A</li> <li>Item B</li> </ul> <button id="addItem">Add New Item</button> <script> const list = document.getElementById("dynamic-list"); // 给 ul 添加 click 事件监听器 list.addEventListener("click", function(event) { if (event.target.tagName === "LI") { console.log("You clicked on:", event.target.textContent); } }); // 动态增加 li 元素 document.getElementById("addItem").onclick = function() { const newItem = document.createElement("li"); newItem.textContent = "New Dynamic Item"; list.appendChild(newItem); }; </script> ``` #### 应用场景 - **优化性能**:对于大量子元素的情况,只需给父容器设置一次事件监听器,而不是为每个子元素单独绑定事件。 - **简化代码维护**:减少了重复代码的数量,使逻辑更加清晰易读。 - **动态内容更新**:能够自动适配新加入的子元素,无需额外操作即能生效。 --- #### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值