javascript - 如何在不使用 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)来将它与你的元素绑定(bind):

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);