數組元素上的簡潔事件監聽器

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屬性中獲得單擊的按鈕

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>