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进行一次调用，则可以通过在公共父元素上设置事件侦听器来使用事件委托。例如，您可以在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";
}

Answer 2

我不确定一个事件处理程序是否良好。如果您要添加100个事件，则可能是这样。如果数量很少，则可以轻松地使用循环添加它们。

const returnButtons = document.querySelectorAll('.return');

function test () {
  console.log(this.textContent) //can use this
}

returnButtons.forEach( function (btn) {
  btn.addEventListener("click", test)
})

<button class="return">One</button>
<button class="return">Two</button>

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

2 个答案: