javascript - 如何在 Vanilla javascript中将onclick替换为更好的替代方法？

我写了下面的代码，它可以工作，但是人们告诉我不要使用onclick。在这种情况下，如何实施替代方案？我将“隐藏”类替换为“块”类，反之亦然。在生产中使用它会不会是错误的，还是有人们所说的更好的替代方法？

function myFunction() {
  var element = document.getElementById("menu");
  if (element.classList.contains("hidden")) {
    element.classList.replace("hidden", "block");
  } else if (element.classList.contains("block")) {
    element.classList.replace("block", "hidden");
  }
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.icon {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

<button onclick="myFunction()">
        <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>

<div id="menu" class="hidden">
  <p>I'm no longer hidden.</p>
</div>

最佳答案

内联点击属性的问题在于它们的范围规则是very strange且不直观，并且需要全局污染。使用Javascript选择元素，并改为使用addEventListener。

您也可以使用classList.toggle而不是在两个不同的类之间交替； .block类没有用，因为<div>的普通display已经是block。

document.querySelector('button').addEventListener('click', () => {
  document.getElementById("menu").classList.toggle('hidden');
});

.hidden {
  display: none;
}
.icon {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

<button>
    <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
  </button>

<div id="menu" class="hidden">
  <p>I'm no longer hidden.</p>
</div>

如果您有多个按钮，并且无法轻松地将您想要附加侦听器的按钮作为目标，请为它提供一个类，以便您可以使用querySelector进行定位：

document.querySelector('.hamburger').addEventListener('click', () => {
  document.getElementById("menu").classList.toggle('hidden');
});

.hidden {
  display: none;
}
.icon {
  fill: currentColor;
  height: 24px;
  width: 24px;
}

<button class="hamburger">
    <svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
  </button>

<div id="menu" class="hidden">
  <p>I'm no longer hidden.</p>
</div>