JavaScript - 事件委派

上一页
下一页

JavaScript 中的事件委托是一种技术，它允许我们将单个事件侦听器附加到父元素，然后使用事件对象来确定哪个子元素触发了事件。这样，我们就可以用一个事件监听器处理多个事件，避免向 DOM 添加太多的事件监听器。

事件委派的步骤

1. 将侦听器附加到共同上级

将单个事件侦听器附加到父元素，封装要监视的元素;这代替了为每个元素附加单独的事件侦听器。使用 addEventListener 等方法实现高效。

2. 检查 Target Element

检查事件处理程序中的 event.target 属性，以查明在其共同祖先中触发它的特定元素。常见检查包括仔细检查 tagName、classList 或其他目标元素属性。

3. 执行所需的操作

根据标识的目标元素和任何指定的条件，执行所需的操作或功能。这可能涉及修改内容、处理按钮单击或执行与事件关联的任何自定义逻辑。

事件委派示例

示例：列表项单击

在此示例中，我们使用事件委派来熟练地管理动态变化的教程列表的点击。作为所有列表项的共享祖先的 <ul> 元素附加了一个单独的事件侦听器。

单击教程后，<li> 通过我们精心设计的事件处理程序将自己标识为目标;因此，在 Console 中启用该特定教程内容的日志记录。这演示了在管理动态列表时事件委派的简化和可扩展方法。


<!DOCTYPE html>
<html>
<head>
	 	<style>
	 	 	 ul {list-style-type: none; padding: 0;}
	 	 	 li {margin: 5px;	
	 	 	 	 	padding: 10px;
	 	 	 	 	border: 1px solid #ccc;
	 	 	 	 	cursor: pointer;	
	 	 	 	 	max-width: 30%;
	 	 	 }
	 	</style>
</head>
<body>
	 	<ul id="myList">
	 	 	 <li>Tutorial 1</li>
	 	 	 <li>Tutorial 2</li>
	 	 	 <li>Tutorial 3</li>
	 	 	 <li>Tutorial 4</li>
	 	 	 <li>Tutorial 5</li>
	 	</ul>
	 	<div id = "output"></div>
	 	<script>
	 	 	 const output = document.getElementById("output");
		 	 	const myList = document.getElementById("myList")
	 	 	 myList.addEventListener("click", function(event) {
	 	 	 	 	if (event.target.tagName === "LI") {
	 	 	 	 	 	 output.innerHTML += "Tutorial clicked: " +	
		 			 			 	event.target.textContent + "<br>";
	 	 	 	 	}
	 	 	 });
	 	</script>
</body>
</html>

示例：表单控件更改

在这里使用事件委托允许监控和记录表单控件值中的更改： <form> 元素充当公共祖先，而输入事件侦听器捕获输入字段中的更改。该脚本通过检查其处理程序中的目标元素来确认事件确实与 <input> 相关。因此，该消息会记录修改后的输入的名称和新值：此操作不仅展示了事件委派的适应性，还展示了其管理动态表单交互的效率。


<!DOCTYPE html>
<html>
<body>
	 	<form id="myForm">
	 	 	 <input type="text" name="username" placeholder="Username">
	 	 	 <input type="password" name="password" placeholder="Password">
	 	 	 <button type="button">Submit</button>
	 	</form>
	 	<div id="message"></div>
	 	<script>
	 	 	 const messageElement = document.getElementById("message");
		 	 	const myForm = document.getElementById("myForm")
	 	 	 myForm.addEventListener("input", function(event) {
	 	 	 	 	if (event.target.nodeName === "INPUT") {
	 	 	 	 	 	 messageElement.innerHTML +=	
		 			 			 	"Input changed: " + event.target.name +	
	 	 	 	 	 	 " - New value: " + event.target.value+'<br>';
	 	 	 	 	}
	 	 	 });
	 	</script>
</body>
</html>

在单个事件侦听器可以有效管理多个元素的交互、减少冗余并提高性能的情况下，事件委派非常有用。常见用例包括处理动态列表、表单交互、表格操作、折叠面板或选项卡式界面、树结构、下拉菜单、多步骤向导、轮播和各种交互式 UI 组件。它简化了代码结构，确保了一致性，并很好地适应了动态内容更改，使其成为 Web 开发中的一种通用技术。

打印本页
上一页
下一页