事件委托实现参数传递
正如前文所述，事件委托是一种高效且优雅的处理大量类似元素事件的方法。其核心思想是：将事件监听器绑定到父元素上，而不是每个子元素上。当子元素触发事件时，事件会沿着 DOM 树向上冒泡，直到被父元素捕获。在父元素的事件处理函数中，我们可以通过 event.target 属性来确定实际触发事件的元素，并根据需要进行处理。
以下代码展示了如何使用事件委托将按钮的 textContent 作为参数传递给 JavaScript 函数：
<div id="wrapper">
<button class="action">1</button>
<button class="action">2</button>
<button class="action">3</button>
<button class="action">4</button>
</div>
<script>
document.querySelector("#wrapper").addEventListener("click", function (e) {
var button = e.target.closest("button.action");
if (button) {
// 获取按钮的 textContent 并传递给 myFunction
myFunction(button.textContent);
e.preventDefault(); // 阻止默认行为
}
});
function myFunction(buttonText) {
console.log("按钮文本内容: " + buttonText);
// 在这里编写你的函数逻辑，使用 buttonText 参数
}
</script>代码解释：
- HTML 结构： wrapper div 包含多个 class 为 action 的 button 元素。
- 事件监听： 使用 document.querySelector("#wrapper").addEventListener("click", ...) 在 wrapper 元素上添加一个点击事件监听器。
- 事件目标判断： 在事件处理函数中，使用 e.target.closest("button.action") 来判断点击事件的触发元素是否为 class 为 action 的 button 元素。 closest() 方法会从目标元素开始，沿着 DOM 树向上查找，直到找到匹配选择器的最近祖先元素。
- 参数传递： 如果点击事件的触发元素是目标按钮，则使用 button.textContent 获取按钮的文本内容，并将其作为参数传递给 myFunction 函数。
- 阻止默认行为： e.preventDefault() 用于阻止按钮的默认行为，例如提交表单。
- myFunction 函数： myFunction 函数接收按钮的文本内容作为参数，并执行相应的逻辑。
注意事项：
立即学习“Java免费学习笔记（深入）”；
- textContent 属性会获取元素及其所有子元素的文本内容。如果按钮包含其他 HTML 元素，则 textContent 会包含这些元素的文本内容。如果只需要按钮本身的文本内容，可以使用 innerText 属性。
- 确保 myFunction 函数在事件监听器之前定义，或者使用函数声明的方式定义，以便在事件监听器中可以访问到该函数。
- 可以根据实际需求修改选择器 "button.action" ，以匹配你的按钮元素。
总结：
事件委托是一种强大的技术，可以有效地处理大量类似元素的事件。通过将事件监听器绑定到父元素上，可以避免为每个子元素单独添加事件监听器，从而提高性能并简化代码。结合 event.target 属性和 closest() 方法，可以轻松地确定实际触发事件的元素，并根据需要进行处理。在本文的示例中，我们利用事件委托将按钮的 textContent 作为参数传递给 JavaScript 函数，实现了灵活且高效的事件处理。
