点击下拉按钮菜单项时如何获取对应的li元素？

假设你的下拉菜单HTML结构类似这样：

<div class="dropdown">
  <button class="dropdown-btn">选择协议</button>
  <ul class="dropdown-menu">
    <li>Http://</li>
    <li>Https://</li>
  </ul>
</div>

下面提供两种常用的JavaScript实现方式：

方法一：事件委托（推荐） #

这种方式适配静态或动态生成的菜单项，通过给父容器绑定事件，利用事件冒泡机制捕获点击的li元素：

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

dropdownMenu.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    const clickedLi = e.target;
    // 可在此对获取到的li进行后续操作
    console.log('选中的li元素:', clickedLi);
    console.log('li内容:', clickedLi.textContent.trim());
  }
});

方法二：直接绑定点击事件 #

如果菜单项是页面加载时就存在的静态元素，可直接给每个li绑定点击事件：

const menuItems = document.querySelectorAll('.dropdown-menu li');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    const clickedLi = this;
    console.log('选中的li元素:', clickedLi);
    console.log('li内容:', clickedLi.textContent.trim());
  });
});

内容的提问来源于stack exchange，提问作者developer_jam