投稿获客
  1. 创想鸟首页
  2. 好文分享

JavaScript事件绑定：多元素交互的正确实践（避免ID重复）

程序猿 • • 好文分享 • 阅读 0

JavaScript事件绑定：多元素交互的正确实践（避免ID重复）

本文旨在解决JavaScript事件监听中因HTML元素ID重复而导致的问题。通过深入解析id属性的唯一性原则，并引入class属性与document.querySelectorAll()方法，文章将指导开发者如何正确地为多个具有相同行为的元素绑定事件监听器，确保所有目标元素都能响应用户交互，从而实现更健壮的前端功能。

1. 理解HTML ID的唯一性原则

在html文档中，id属性旨在为元素提供一个全局唯一的标识符。这意味着在整个html页面中，任何两个元素都不应拥有相同的id值。当您使用document.getelementbyid(‘someid’)方法时，浏览器会查找文档中第一个匹配该id的元素并返回它。如果文档中存在多个相同的id，getelementbyid()只会返回第一个，而忽略其余的同id元素。

在给定的场景中，PHP循环生成表格行时，为每一行的“View”按钮都赋予了相同的id=”myId”：

// ... 部分代码省略 ...while ($res2=mysqli_fetch_assoc($result2)) {    echo "";    // ... 其他元素 ...    // 错误的做法：为所有按钮使用相同的ID    echo "View";    echo ""; // 注意：原始代码中闭合标签位置有误，应在循环内部}// ... 部分代码省略 ...

随后，JavaScript代码尝试为这个ID绑定点击事件：

document.getElementById('myId').addEventListener("click", function () {    document.querySelector('.bg-modal').style.display = "flex";});

由于id=”myId”在表格中重复出现，document.getElementById(‘myId’)只会选中并为第一个“View”按钮绑定事件。因此，只有第一行的按钮能够触发弹窗，而其他行的按钮则无效。

2. 解决方案：使用Class选择器与querySelectorAll

为了解决这个问题，我们应该遵循HTML规范，为具有相同行为但不同实例的元素使用class属性，并通过document.querySelectorAll()方法来选择所有匹配的元素。

立即学习“Java免费学习笔记（深入）”；

2.1 修改HTML结构（PHP生成部分）

将按钮的id属性改为class属性。为了更好地语义化，我们将class命名为view-button（或根据实际功能命名）。同时，修正PHP循环中

标签的闭合位置。

         1, 'project_name' => 'Project A', 'duedate' => '2023-01-01', 'subdate' => '2022-12-30', 'comment' => 'First project', 'status' => 'Completed'],            ['project_id' => 2, 'project_name' => 'Project B', 'duedate' => '2023-02-15', 'subdate' => '2023-02-10', 'comment' => 'Second project', 'status' => 'In Progress'],            ['project_id' => 3, 'project_name' => 'Project C', 'duedate' => '2023-03-20', 'subdate' => '', 'comment' => 'Third project', 'status' => 'Pending']        ];        // 模拟 mysqli_fetch_assoc 循环        foreach ($data as $res2) {            echo "";            echo "";            echo "";            echo "";            echo "";            echo "";            echo "";            // 将 id 更改为 class，并添加 data-属性以便后续获取行数据（如果需要）            echo "";            echo "";        }        ?>    
            
            ID            Project Name            Due Date            Sub Date            Comment            Status            Option        
        
" . htmlspecialchars($res2['project_id']) . "" . htmlspecialchars($res2['project_name']) . "" . htmlspecialchars($res2['duedate']) . "" . htmlspecialchars($res2['subdate']) . """ . htmlspecialchars($res2['comment']) . """ . htmlspecialchars($res2['status']) . "View
    
        
Project Details
        
This is the popup content for project ID:

注意事项：

htmlspecialchars()：在PHP输出用户或数据库内容时，始终使用htmlspecialchars()函数来防止跨站脚本攻击（XSS）。data-project-id：这是一个HTML5的data-*属性，可以用来存储与元素相关的自定义数据。在点击事件中，我们可以通过this.dataset.projectId来获取对应的项目ID，这对于在弹窗中显示特定行的数据非常有用。闭合：确保标签在while循环（或foreach循环）内部正确闭合。

2.2 修改JavaScript事件绑定

现在，我们可以使用document.querySelectorAll(‘.view-button’)来获取所有带有view-button类的元素（即所有“View”按钮）。querySelectorAll()返回一个NodeList（节点列表），它是一个类似数组的对象。我们需要遍历这个NodeList，为每个元素单独绑定事件监听器。

document.addEventListener('DOMContentLoaded', function() {    // 获取所有带有 'view-button' 类的元素    const viewButtons = document.querySelectorAll('.view-button');    const bgModal = document.querySelector('.bg-modal');    const popupProjectIdSpan = document.getElementById('popup-project-id'); // 获取显示项目ID的元素    const closeModalButton = document.querySelector('.close-modal');    // 遍历所有按钮，并为每个按钮添加点击事件监听器    viewButtons.forEach(button => {        button.addEventListener('click', function(event) {            event.preventDefault(); // 阻止标签的默认跳转行为            // 显示模态框            if (bgModal) {                bgModal.style.display = "flex";            }            // 如果需要，获取并显示点击按钮对应行的项目ID            const projectId = this.dataset.projectId; // 获取data-project-id属性的值            if (popupProjectIdSpan && projectId) {                popupProjectIdSpan.textContent = projectId;            }            // 可以在这里根据projectId发起Ajax请求获取更多详情并填充到模态框            console.log("Clicked project ID:", projectId);        });    });    // 为关闭按钮添加事件监听器    if (closeModalButton) {        closeModalButton.addEventListener('click', function() {            if (bgModal) {                bgModal.style.display = "none";            }        });    }    // 点击模态框背景关闭（可选）    if (bgModal) {        bgModal.addEventListener('click', function(event) {            // 只有当点击事件的目标是bgModal本身时才关闭，避免点击内容区关闭            if (event.target === bgModal) {                bgModal.style.display = "none";            }        });    }});

代码解释：

document.addEventListener(‘DOMContentLoaded’, …)：确保DOM完全加载后再执行JavaScript代码，避免因元素未加载而无法选中。document.querySelectorAll(‘.view-button’)：通过类选择器选中所有具有view-button类的元素。forEach(button => { … })：遍历NodeList中的每一个按钮元素。button.addEventListener(‘click’, function(event) { … })：为当前遍历到的button元素添加点击事件监听器。event.preventDefault()：阻止标签点击后的默认行为（如跳转到#）。this.dataset.projectId：在事件监听器内部，this指向当前被点击的按钮元素。dataset属性提供对所有data-*属性的访问。

3. 总结与最佳实践

ID的唯一性：始终牢记id属性在HTML文档中必须是唯一的。它适用于需要唯一标识的元素，例如表单的label关联、特定的JavaScript操作目标或锚点链接。Class的多用性：class属性用于为多个元素应用相同的样式或行为。当您需要对一组相似的元素执行相同的JavaScript操作时，class是首选。getElementById vs querySelectorAll：document.getElementById()：用于获取单个、唯一的元素。document.querySelectorAll()：用于获取所有匹配指定CSS选择器的元素，返回一个NodeList，通常需要遍历。事件委托（Event Delegation）：对于包含大量动态生成元素的列表或表格，除了为每个元素单独绑定事件外，还可以考虑使用事件委托。即，将事件监听器绑定到它们的共同父元素上，然后通过事件冒泡和event.target来判断是哪个子元素触发了事件。这可以减少内存消耗和提高性能，尤其是在元素数量非常庞大时。例如，将点击事件绑定到元素上，然后检查event.target是否是view-button。

通过遵循这些原则和实践，您可以构建出更健壮、更易于维护且性能更优的前端应用程序。

以上就是JavaScript事件绑定：多元素交互的正确实践（避免ID重复）的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1267282.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

291.2K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月10日 10:09:39
下一篇 2025年12月10日 10:09:51

相关推荐

  • PHP怎样实现用户积分兑换？虚拟货币变现设计 好文分享

    PHP怎样实现用户积分兑换？虚拟货币变现设计

    积分系统设计的核心考量是数据模型的严谨性、事务性操作、安全性与可扩展性；2. 确保积分兑换安全可靠的关键在于使用数据库事务保证操作原子性、服务端双重验证防止数据篡改、并发控制避免超兑、输入过滤与日志审计提升系统安全性，所有操作必须在后端完成校验并以事务方式执行，确保数据一致性与业务逻辑完整。 用户积…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP函数怎样使用类型提示增强函数安全性 PHP函数类型提示的实用技巧 好文分享

    PHP函数怎样使用类型提示增强函数安全性 PHP函数类型提示的实用技巧

    php函数类型提示通过在函数定义中明确参数和返回值的预期数据类型，强制数据在进入或离开函数时符合预设规范，从而有效避免因传入错误类型数据导致的逻辑漏洞、运行时错误和安全风险；2. 类型提示提升了代码的健壮性，通过在函数调用时进行类型检查，避免了在函数内部重复编写类型判断逻辑，使开发者能专注于核心业务…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP 文件上传错误：缺少临时文件夹的解决方案 好文分享

    PHP 文件上传错误：缺少临时文件夹的解决方案

    本文旨在解决 PHP 文件上传过程中出现的“Missing a temporary folder”错误。该错误通常由于 PHP 配置文件中临时文件夹路径配置不正确导致。本文将提供详细的配置方法，帮助开发者快速解决此问题，确保文件上传功能正常运行。 当你在 PHP 中进行文件上传时，可能会遇到 &#8…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 如何把DTO对象转为关联数组 好文分享

    Symfony 如何把DTO对象转为关联数组

    在symfony中，将dto转换为关联数组最直接的方式是使用serializer组件结合objectnormalizer和jsonencoder；2. 通过调用serializer的normalize()方法，可将dto及其嵌套对象自动转换为关联数组；3. 利用序列化组（@groups）、最大深度（…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP常用框架怎样实现数据验证与错误提示 PHP常用框架表单验证的技巧 好文分享

    PHP常用框架怎样实现数据验证与错误提示 PHP常用框架表单验证的技巧

    php常用框架通过验证器或请求对象集成数据验证与错误提示，定义规则如required、email、unique等，自动校验并收集错误信息；2. 验证失败时，错误被闪存至会话并在视图中通过$errors对象展示，支持自定义提示与多语言；3. 前端验证提升体验但不可靠，后端验证是保障数据安全与一致性的核…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 怎样把事件对象转为数组 好文分享

    Symfony 怎样把事件对象转为数组

    转换symfony事件对象为数组需根据事件类型提取数据，无通用方法；2. 自定义事件可通过getter方法手动构建数组；3. 内置事件如requestevent需调用其getrequest()等方法获取数据并组装；4. doctrine事件可通过getentity()获取实体后提取属性；5. 可使用…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Laravel 中创建可复用滑块组件的两种方法 好文分享

    Laravel 中创建可复用滑块组件的两种方法

    本文介绍了在 Laravel 项目中创建可复用滑块组件的两种实用方法：使用 Blade include 和使用 View Composers。通过这两种方法，开发者可以避免代码重复，提高代码的可维护性和可读性，并更有效地管理视图逻辑。文章详细阐述了每种方法的实现步骤，并提供了示例代码，帮助开发者快速…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 怎么把业务流程转为数组 好文分享

    Symfony 怎么把业务流程转为数组

    将symfony中的业务流程数据转化为数组，核心在于通过序列化组件和dtos结构化提取数据状态，1. 使用symfony serializer component结合@groups注解精确控制属性输出；2. 通过dtos解耦领域模型与数据传输，提升可维护性；3. 利用serialization gr…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Laravel：在控制器中将 PDF 文件传递给 JavaScript 变量 好文分享

    Laravel：在控制器中将 PDF 文件传递给 JavaScript 变量

    第一段引用上面的摘要： 本文介绍如何在 Laravel 应用中，将服务器端的 PDF 文件路径传递给客户端的 JavaScript 变量，以便在前端进行 PDF 文件的展示和处理。通过将 PDF 文件路径以 JSON 格式嵌入 HTML 元素，并在 JavaScript 中解析，避免了直接传输 PD…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 如何把工作流状态转数组 好文分享

    Symfony 如何把工作流状态转数组

    要获取symfony工作流的所有状态及其元数据，首先通过工作流实例的getdefinition()方法获取定义对象，再调用getplaces()获得状态数组，结合getmetadatastore()->getplacemetadata()提取每个状态的元数据。1. 注入特定工作流服务（如wor…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Laravel：将PDF文件从Controller传递到JavaScript变量 好文分享

    Laravel：将PDF文件从Controller传递到JavaScript变量

    在Laravel项目中，有时需要在前端JavaScript代码中使用服务器端存储的PDF文件。直接将PDF文件内容传递到前端可能效率较低。一种更有效的方法是将PDF文件的URL传递到前端，然后让前端根据URL请求PDF文件。本文将详细介绍如何实现这一过程。 1. Controller端处理 首先，需…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP URL 传递 MySQL 记录中的完整字符串 好文分享

    PHP URL 传递 MySQL 记录中的完整字符串

    在 PHP 开发中，经常需要将数据通过 URL 传递给其他页面。当数据来自 MySQL 数据库，并且包含空格等特殊字符时，直接将数据拼接到 URL 中可能会导致问题，例如只显示第一个单词。本文将介绍如何使用 rawurlencode() 函数来解决这个问题，确保 URL 中能够正确传递包含空格的字符…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 如何把审计记录转为数组 好文分享

    Symfony 如何把审计记录转为数组

    核心答案是使用symfony serializer组件将审计记录转换为数组；2. 首先确定审计数据来源（如gedmo logentry、auditbundle或自定义实现），不同来源的数据结构决定后续处理方式；3. 对于实体类审计记录，利用serializer的normalize方法配合dateti…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP URL 传递 MySQL 记录中的多词字段 好文分享

    PHP URL 传递 MySQL 记录中的多词字段

    本文旨在解决 PHP 在 URL 中传递包含空格的 MySQL 记录字段时，只显示第一个单词的问题。通过使用 rawurlencode() 函数对 URL 中的值进行编码，确保空格等特殊字符能够正确传递，从而完整地获取 MySQL 记录中的多词字段。同时，提醒读者在接收端页面进行相应的解码处理。 在…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP：解决URL中MySQL记录只显示一个单词的问题 好文分享

    PHP：解决URL中MySQL记录只显示一个单词的问题

    本文旨在解决PHP程序在URL传递MySQL记录时，由于空格导致只显示第一个单词的问题。通过使用rawurlencode()函数对URL中的参数进行编码，确保包含空格的字符串能够正确传递，并提供相应的代码示例和注意事项，帮助开发者解决类似问题。 在PHP开发中，经常需要将MySQL数据库中的数据通过…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP常用框架怎样集成支付接口实现在线支付 PHP常用框架支付集成的基础教程 好文分享

    PHP常用框架怎样集成支付接口实现在线支付 PHP常用框架支付集成的基础教程

    选择合适的支付sdk，根据用户群体确定支付宝、微信支付或paypal等平台；2. 使用composer安装sdk并配置app id、密钥等信息；3. 创建支付请求，设置金额、商品描述、回调url等参数；4. 处理异步回调，验证签名和订单信息，更新订单状态并记录日志；5. 确保安全，使用https、签…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • 深入解析：在WooCommerce自定义邮件中添加附件 好文分享

    深入解析：在WooCommerce自定义邮件中添加附件

    本文旨在提供一份详细的教程，指导开发者如何在WooCommerce的自定义邮件中正确地添加附件。我们将探讨常见的错误、使用现代化的WooCommerce邮件API，并提供一个基于订单状态变化的完整代码示例，确保附件能够成功发送给客户。 1. 理解WooCommerce邮件系统与附件机制 WooCom…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • Symfony 怎么把请求参数转为对象 好文分享

    Symfony 怎么把请求参数转为对象

    使用 paramconverter（推荐）：symfony 中最常见的方式是利用 paramconverter 自动将请求参数转换为对象，特别是通过 symfony 6.2+ 引入的 #[maprequestpayload] 属性，可自动从请求体映射数据并验证 dto，极大简化控制器逻辑；2. 手动…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • 精确定制WooCommerce特定邮件的页眉和页脚 好文分享

    精确定制WooCommerce特定邮件的页眉和页脚

    本教程详细介绍了如何在WooCommerce中，针对如“待处理订单”等特定邮件类型，而非所有邮件，独立定制其邮件头部和底部内容。通过利用WooCommerce提供的 woocommerce_email_header 和 woocommerce_email_footer 动作钩子，并结合 $email…

    程序猿的头像 程序猿
    2025年12月10日
    000
  • PHP如何开发自动化广告系统？CPC/CPM计算 好文分享

    PHP如何开发自动化广告系统？CPC/CPM计算

    设计可扩展广告投放引擎需使用消息队列（如rabbitmq或kafka）异步处理点击和展示事件，避免高并发阻塞，并结合redis或memcached缓存高频数据以提升性能；2. 实现精准广告投放需收集用户浏览历史、搜索记录、地理位置等数据，通过机器学习分析用户兴趣并匹配广告，同时采用匿名化技术保护用户…

    程序猿的头像 程序猿
    2025年12月10日
    000

发表回复

登录后才能评论
关注微信