将多个元素绑定到同一onclick

Bind more then one element to the same onclick

本文关键字：onclick 绑定 元素      更新时间：2023-09-26

我太习惯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 elements = document.querySelectorAll('[data-overlay]')
var elementArray = Array.prototype.slice.call( elements );
elementArray .forEach(function(element){
   element.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);
  }
});

适用于所有主流浏览器，因为IE11支持HTMLElement.dataset，所以您可能可以使用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中出现和消失，那么Event Delegation的效果最好
  • 请注意，使用Event Delegation，您不必将事件绑定在主体上，您可以使用已知的最高祖先，如果所有[data-overlay]元素都在同一父级（或祖父母级）下，则可以将事件绑定到该父级
  • 请注意我是如何使用addEventListener而不是.onclick的，使用事件属性被认为是一种糟糕的做法，因为即使您想添加多个函数，也不能添加多个（addEventListener没有这样的限制）
相关文章：