JavaScript 中怎么用事件委托实现自定义下拉框选项-js教程-PHP中文网

用事件委托实现自定义下拉框，核心是将点击事件绑定在父容器.dropdown-menu上，通过e.target判断是否为并读取data-value，支持动态增删选项、键盘操作及可访问性优化。

javascript 中怎么用事件委托实现自定义下拉框选项

用事件委托实现自定义下拉框选项，核心是把点击事件监听绑定在父容器（比如 .dropdown-menu）上，而不是每个 <li> 或 <button></button> 上。这样既能动态添加/删除选项不需重新绑定事件，又能减少内存占用和提升性能。

1. 结构准备：HTML 和基础样式

先写一个语义清晰、可访问性友好的结构：

<div class="custom-dropdown">
  <button class="dropdown-trigger">请选择</button>
  <ul class="dropdown-menu" aria-hidden="true">
<li data-value="apple">? 苹果</li>
    <li data-value="banana">? 香蕉</li>
    <li data-value="cherry">? 樱桃</li>
  </ul>
</div>

注意：data-value 是关键标识，用于后续取值；aria-hidden 辅助控制可访问性状态。

2. 事件委托绑定：只监听一次父元素

给 .dropdown-menu 绑定 click 事件，用 event.target 判断是否点中了 <li>：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

const menu = document.querySelector('.dropdown-menu');

menu.addEventListener('click', function (e) {
  // 确保点击的是菜单项（li），不是空白处或 ul 自身
  if (e.target.tagName === 'LI') {
    const selectedValue = e.target.dataset.value;
    const selectedText = e.target.textContent.trim();

    // 更新触发按钮显示
    const trigger = document.querySelector('.dropdown-trigger');
    trigger.textContent = selectedText;

    // 触发自定义事件，便于外部响应（如表单提交、状态更新）
    trigger.dispatchEvent(new CustomEvent('optionSelected', {
      detail: { value: selectedValue, text: selectedText }
    }));

    // 可选：收起下拉菜单
    menu.setAttribute('aria-hidden', 'true');
  }
});

3. 支持动态选项：新增/删除不用重绑事件

因为事件监听在父级，所有新插入的 <li> 自动“被委托”：

用 menu.insertAdjacentHTML('beforeend', '<li data-value="dragonfruit">? 火龙果</li>') 添加新选项，无需额外操作
用 menu.querySelector('[data-value="banana"]').remove() 删除某项，也不影响其他事件
若需禁用某项，加 disabled 类 + CSS pointer-events: none，或在事件处理中过滤 e.target.hasAttribute('disabled')