本文介绍如何在不使用 ID 或 querySelector 的情况下，将触发点击事件的元素的 innerHTML 作为参数传递给 JavaScript 函数。通过事件委托，我们可以高效地处理大量类似元素的事件，避免为每个元素单独绑定事件监听器，从而提高代码的可维护性和性能。
事件委托：高效处理大量元素的事件
当页面上有大量相似的元素需要绑定相同的事件处理函数时，为每个元素单独绑定事件监听器会消耗大量的资源。事件委托是一种高效的解决方案，它将事件监听器绑定到这些元素的父元素上，利用事件冒泡机制，当子元素触发事件时，事件会沿着 DOM 树向上冒泡，最终被父元素的事件监听器捕获。
实现步骤：
选择父元素： 找到包含所有目标元素的父元素。绑定事件监听器： 将事件监听器绑定到父元素上。事件处理： 在事件处理函数中，判断事件的触发者是否是目标元素，如果是，则获取其 innerHTML 并作为参数传递给目标函数。
示例代码：
立即学习“Java免费学习笔记（深入）”；
document.querySelector("#wrapper").addEventListener("click", function (e) { // 查找最近的匹配选择器的祖先元素，如果没找到，则返回 null。 var button = e.target.closest("button.action"); if (button) { // 获取按钮的文本内容 (innerHTML) var buttonText = button.textContent; // 调用你的函数，并将文本内容作为参数传递 myFunction(buttonText); // 阻止默认行为（如果需要） e.preventDefault(); }});function myFunction(text) { // 在这里处理传递过来的文本内容 console.log("按钮文本内容: " + text); // 例如，可以将其显示在页面上 // document.getElementById("output").textContent = "你点击了: " + text;}
代码解释：
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 作为参数传递给目标函数。
以上就是如何将触发元素的 innerHTML 作为参数传递给 JavaScript 函数的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575344.html
微信扫一扫 
支付宝扫一扫 
