javascript - 数组元素上的简洁事件监听器

Question

我想知道是否有更简洁的方法来执行相同的操作。

我正在尝试监听执行相同操作的两个单独按钮上的事件，并且这两个按钮具有相同的“返回”类，并且我已将它们分配给一个名为“returnButton”的数组。我想要一个事件监听器，它可以监听两个按钮并将单击的按钮传递到我的 returnToMainContent 函数。

当前状态下的代码可以正常运行，但我相信应该有一种方法可以消除我的一个事件监听器。我正在努力尝试这样做。

const returnButton = document.querySelectorAll('.return');
const mainContent = document.querySelector('#main-content');

returnButton[0].addEventListener('click', () => {returnToMainContent(returnButton[0])});
returnButton[1].addEventListener('click', () => {returnToMainContent(returnButton[1])});

function returnToMainContent(button){
    button.parentElement.style.display = "none";
    mainContent.style.display = "block";
}

非常感谢您的帮助!

Answer 1

如果您只想对 addEventListener 进行一次调用，则可以通过在公共(public)父元素上设置事件监听器来使用事件委托(delegate)。例如，您可以将其设置在 document 上。然后，您将从 target property from the event object 中获取点击了哪个按钮。自动传递给事件监听器

document.addEventListener('click',event=>{
  var button = event.target;
  //check that the element click was one of the 'return' buttons
  if(button.classList.contains('return')){
    returnToMainContent(button);
  }
});

function returnToMainContent(button){
    button.parentElement.style.display = "none";
    mainContent.style.display = "block";
}