自定义选择元素事件侦听器分配难题：彻底解决！

javascript

2024-03-02 01:46:39

自定义选择元素事件侦听器的疑难杂症

引言：

在创建自定义选择元素时，遇到多个元素事件侦听器无法正常工作的难题？本文深入探讨了这一常见问题，提供循序渐进的解决方案，并分享专业知识，帮助你解决此类问题。

问题定义：

自定义选择元素的事件侦听器有时会分配给最后一个对象，导致其他对象无法正常响应事件。这种行为归因于参数使用不当，造成事件侦听器被覆盖。

解决方案：

步骤 1：分配事件侦听器

在循环中为每个自定义选择元素分配唯一的事件侦听器，避免覆盖。

步骤 2：选择器选择

使用正确的 CSS 选择器选择自定义选择元素及其组成元素（例如按钮、下拉列表、选项）。

步骤 3：事件侦听器名称

为不同类型的事件侦听器使用不同的名称，例如：

按钮：selectBtn
下拉列表：optionsList
选项：optionValue

步骤 4：引用

在事件侦听器中使用 this 引用来引用当前的自定义选择元素。

示例代码：

let customSelect = document.querySelectorAll(".custom-select");
for (let i = 0; i < customSelect.length; i++) {
  let selectBtn = customSelect[i].querySelector(".select-button");
  let selectedValue = customSelect[i].querySelector(".selected-value");
  let optionsList = customSelect[i].querySelectorAll(".select-dropdown li");

  // 按钮点击事件
  selectBtn.addEventListener("click", function() {
    this.classList.toggle("active");
  });

  // 选项点击事件
  for (let x = 0; x < optionsList.length; x++) {
    optionsList[x].addEventListener("click", function() {
      selectedValue.textContent = this.textContent;
      this.classList.remove("active");
    });
  }
}