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

Question

我在 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 {
       // "
      }
   });
}

这一次，我不使用汉堡，而是使用其他元素。closeArea. 然而，这将不必要地重复代码。

有没有一种方法可以只为两者使用一个 if 语句addEventListeners？

标签： javascript

Answer 1

是的，您可以将两者都添加到数组中，并按如下方式循环遍历它们

    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 {
                // "
              }
           });
        }
    }