如何在不使用jQuery的情況下為兩個不同的按鈕添加單擊事件處理程序？

Question

當用戶打開模態時，有兩種方法可以關閉它，一種方法是按下方框右上角的“x”，或者按下取消按鈕。 這兩個按鈕都在同一個類名稱modal-hide但也有modal-close和modal-cancel id。

var cancel = document.getElementById('modal-cancel');
var close = document.getElementById('modal-close');

cancel.onclick = function () {
    //close window
}
close.onlick = function () {
    //close window
}

實現事件處理程序的最佳方法是什么，這樣我就不必編寫兩個不同的onclick函數來執行相同的操作？

我根本不想使用jQuery！

Answer 1

首先，不要使用事件屬性！ 請改用addEventListener（ MDN ）作為現代標准。 然后你應該定義一個單獨的處理函數（讓我們說onClick ）將它與你的元素綁定：

var cancelElt = document.getElementById('modal-cancel');
var closeElt = document.getElementById('modal-close');
var onClick = function () {
  alert('Hello!');
};

cancelElt.addEventListener('click', onClick);
closeElt.addEventListener('click', onClick);

Answer 2

只需使用命名而不是匿名函數。 我使用下面的addEventListener而不是onclick。

var cancel = document.getElementById('modal-cancel');
var close = document.getElementById('modal-close');

var clickFunction = function() {
  // close modal
}

cancel.addEventListener('click', clickFunction, false);
close.addEventListener('click', clickFunction, false);

Answer 3

基本上是一行的解決方案。

Array.prototype.forEach.call(document.querySelectorAll("#modal-cancel, #modal-close"), function(element) {
    element.addEventListener("click", function() {
      //close window
    }, false);
});