本文介绍如何在不使用 ID 或 querySelector 的情况下，将触发点击事件的元素的 innerHTML 作为参数传递给 JavaScript 函数。通过事件委托，我们可以高效地处理大量类似元素的事件，避免为每个元素单独绑定事件监听器，从而提高代码的可维护性和性能。
事件委托：高效处理大量元素的事件
当页面上有大量相似的元素需要绑定相同的事件处理函数时，为每个元素单独绑定事件监听器会消耗大量的资源。事件委托是一种高效的解决方案，它将事件监听器绑定到这些元素的父元素上，利用事件冒泡机制，当子元素触发事件时，事件会沿着 DOM 树向上冒泡，最终被父元素的事件监听器捕获。
实现步骤：
- 选择父元素： 找到包含所有目标元素的父元素。
- 绑定事件监听器： 将事件监听器绑定到父元素上。
- 事件处理： 在事件处理函数中，判断事件的触发者是否是目标元素，如果是，则获取其 innerHTML 并作为参数传递给目标函数。
示例代码：
立即学习“Java免费学习笔记（深入）”；
代码解释：
- document.querySelector("#wrapper").addEventListener("click", function (e) { ... });：这行代码将一个点击事件监听器绑定到 ID 为 "wrapper" 的 div 元素上。
- var button = e.target.closest("button.action");：这行代码使用 closest() 方法来查找触发点击事件的元素（e.target）最近的、匹配选择器 "button.action" 的祖先元素。 closest() 方法会沿着 DOM 树向上查找，直到找到匹配的元素或到达文档的根节点。 如果没找到，则返回 null。
- if (button) { ... }：这行代码检查是否找到了匹配的按钮元素。只有当点击事件发生在带有 "action" 类的 button 元素上时，才会执行 if 语句块中的代码。
- var buttonText = button.textContent;：这行代码获取了按钮的文本内容，并将其存储在 buttonText 变量中。
- myFunction(buttonText);：这行代码调用了 myFunction 函数，并将 buttonText 作为参数传递给它。
- e.preventDefault();：阻止默认行为，例如阻止链接跳转。
注意事项：
- 确保父元素的选择器正确，能够包含所有目标元素。
- closest() 方法非常重要，它确保了事件只在点击目标按钮时才触发。
- textContent 属性获取元素的文本内容，如果需要获取包含 HTML 标签的内容，可以使用 innerHTML 属性。
- 根据实际需求，修改 myFunction 函数，处理传递过来的 innerHTML。
总结：
使用事件委托可以将事件监听器绑定到父元素上，利用事件冒泡机制，高效地处理大量元素的事件。这种方法可以避免为每个元素单独绑定事件监听器，从而提高代码的可维护性和性能。结合 closest() 方法，可以精确地判断事件的触发者是否是目标元素，并获取其 innerHTML 作为参数传递给目标函数。
