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时，我还希望在HTML中有一个div，以同时关闭菜单。我可以再做一个。

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

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

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

有没有办法我只能对两个addEventListeners使用一个if语句？

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

Answer 2

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

.container {
  height: calc(100vh - 70px);

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

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

Answer 3

以下是使用返回函数的函数的概念。乍一看这可能很复杂，但是稍后可以封装一些以后要访问的额外变量，从而获得优势。

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

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

// create a function that returns a function
function binder(param1, param2) {
  return function () {
      // triggered on event call, so this will be executed later
      console.log(param1, param2);
  }
}

// here are variables you want to access later
var var1 = 'foo';
var var2 = 'bar';

// pass the variables to the binder function
// this will create a function with access to the variables you need
closeArea.addEventListener('click', binder(var1, var2));

所以你可以这样做

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

// Create a function to create a handler function that has access to it's own variables later on
function createMenuClickHandler(nav) {
    // Given the started value is always the same, you can choose to not pass parameters
    // every time you call this function, you get a function with it's own independent menuOpen value
    const menuOpen = false; 

    return function() {
        // You usual business
        if (!menuOpen) {
            nav.classList.add("menu-is-open");
            menuOpen = true;
        } else {
            nav.classList.remove("menu-is-open");
            menuOpen = false;
        }
    }
}

// You may store the result of createMenuClickHandler if you want to share the same state on other places in your code as well
// If you want a separate state, call createMenuClickHandler again
closeArea.addEventListener('click', createMenuClickHandler(burger));

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

3 个答案: