Javascript 如何将一个或多个变量附加到一个事件侦听器？

我在if语句中有一个事件侦听器，用于制作菜单幻灯片

const burger = document.querySelector(".c-brgr");

if (!menuOpen) {
    burger.addEventListener('click', function () {
      if (!menuOpen) {
        nav.classList.add("menu-is-open");
        menuOpen = true;
      } else {
        nav.classList.remove("menu-is-open");
        menuOpen = false;
      }
   });
}

我在HTML中还有一个div，我希望在单击它时关闭菜单。我可以再做一个

const closeArea = document.querySelector(".js-close-area");

if (!menuOpen) {
    closeArea.addEventListener('click', function () {
      if (!menuOpen) {
       // as above
      } else {
       // "
      }
   });
}

这次，我用了另一种元素，而不是汉堡。封闭区域。然而，这将不必要地重复代码

---

是否有一种方法可以只对两个AddEventListener使用一个if语句？

您当前使用的是匿名函数作为事件侦听器。为避免重复代码，请改用命名函数：

function toggleMenu() {
   // if statement goes here
}

现在，您可以将其添加为所需任何项目的事件侦听器：

burger.addEventListener('click', toggleMenu);
closeArea.addEventListener('click', toggleMenu);

---

是的，您可以将这两个元素都添加到数组中，并按如下方式循环它们

    const burger = document.querySelector(".c-brgr");
    const closeArea = document.querySelector(".js-close-area");

    if (!menuOpen) {
        [burger, closeArea].forEach(element => {
          element.addEventListener('click', function () {
             if (!menuOpen) {
               // as above
              } else {
                // "
              }
           });
        }
    }

---

下面是使用返回函数的函数的概念。起初这听起来可能很复杂，但稍后可以通过包装一些您喜欢稍后访问的额外变量来获得优势

这样，您就可以创建多个函数，每个函数都有各自独立的状态或值。从同一包装器函数调用所有函数

如果添加更多按钮，此方法将很容易扩展，因为您可以在使用相同代码时为每个按钮存储单独的状态

//创建一个返回函数的函数 函数binderparam1，param2{ 返回函数{ //在事件调用时触发，因此稍后将执行此操作 console.logparam1，param2； } } //以下是您希望稍后访问的变量 var var1='foo'； var var2=‘bar’； //将变量传递给binder函数 //这将创建一个可以访问所需变量的函数

---

closeArea.addEventListener'click'，BinderBar1，var2；给它们一个公共类，选择该类的所有元素，循环遍历它们，并将addEventListener应用于迭代中的当前元素