javascript - 将多个元素绑定(bind)到同一onclick

我已经习惯了jQuery，所以我无法做到这一点。

我想使用JavaScript将更多元素绑定到同一onlick。这仅绑定第一项，我尝试querySelectorAll不会绑定任何项。

jsfiddle

<div data-overlay></div>
<div data-overlay></div>
<div data-overlay></div>
<div data-overlay></div>

document.querySelector('[data-overlay]').onclick = function() {
    console.log('I'm clicked');
}

最佳答案

有两种方法可以做到这一点。

“可能实际上是最好的”-又称活动委托

var handler = function(event) {
  console.log("I'm clicked");
};

// Register an event on the body, all clicks on the document are captured.
document.body.addEventListener('click', function(event) {
  // Check if the click occurred on an element we care about
  if (event.target.dataset.overlay !== undefined) {
    // Call the handler if it is.
    handler.call(this, event);
  }
});

由于支持HTMLElement.dataset的IE11，因此可以在所有主流浏览器中使用，您可以将getAttribute用于早期支持。

现代

var handler = () => {
  console.log("I'm clicked");
};

// This line makes it work in older versions of modern browsers.
NodeList.prototype[Symbol.iterator] = NodeList.prototype[Symbol.iterator]
  || Array.prototype[Symbol.iterator];

for (let el of document.querySelectorAll('[data-overlay]')) {
  el.addEventListener('click', handler);
}

不太现代

var handler = () => {
  console.log("I'm clicked");
};

[].forEach.call(document.querySelectorAll('[data-overlay]'), el =>
    el.addEventListener('click', handler));

“我需要支持Internet Explorer”

var handler = function() { console.log("I'm clicked"); };
var elements = document.querySelectorAll('[data-overlay]');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', handler);
}

请注意，如果您有许多匹配元素（数百个），或者在任何给定时间可以从DOM中出现和消失匹配元素，则事件委托效果最好。
请注意，使用事件委托，您不必将事件绑定在正文上，可以使用已知的最高祖先，如果所有[data-overlay]元素都在同一父级（或祖父母）下，则可以将事件绑定到该父级。 。
请注意，我是如何使用addEventListener而不是.onclick的，使用事件属性被认为是一种不好的做法，因为即使您想要（addEventListener没有这样的限制），也不能添加多个功能。