将多个元素绑定到同一个onclick

Question

我已经习惯了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');
}

Answer 1

试试这个

var elements = document.querySelectorAll('[data-overlay]')
var elementArray = Array.prototype.slice.call( elements );
elementArray .forEach(function(element){
   element.onclick = function() {
      console.log("I'm clicked");
   }
})

Answer 2

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

＆＃34;可能实际上最好＆＃34; - a.k.a.事件代表团

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

＆＃34;我需要支持Internet Explorer＆＃34;

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的方式，使用事件属性被认为是一种不好的做法，因为即使您想要（{{1}也无法添加多个函数没有这样的限制）。