如何为具有相同类名的多个按钮添加事件侦听器?

你真正要找的是JavaScript事件委托。在您的示例中，您有BUTTON元素，我假设它们是<button>标记。现在您想知道其中一个按钮何时被单击，然后运行一个函数:

if (document.addEventListener) {
    document.addEventListener("click", handleClick, false);
}
else if (document.attachEvent) {
    document.attachEvent("onclick", handleClick);
}
function handleClick(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;
    var element = event.target;
    // Climb up the document tree from the target of the event
    while (element) {
        if (element.nodeName === "BUTTON" && /foo/.test(element.className)) {
            // The user clicked on a <button> or clicked on an element inside a <button>
            // with a class name called "foo"
            doSomething(element);
            break;
        }
        element = element.parentNode;
    }
}
function doSomething(button) {
    // do something with button
}

在页面上出现<button class="foo">...</button>元素的任何地方，单击它或其中的任何HTML标签，将运行doSomething函数。

更新:由于使用了事件委托，因此在文档对象上只注册了一个单击处理程序。如果由于AJAX调用而创建了更多的<button>，则不必在这些新的CC_5上注册单击处理程序，因为我们利用了从用户单击的元素到文档对象本身的单击事件。

如果你没有jquery:

if (document.body.addEventListener){
    document.body.addEventListener('click',yourHandler,false);
}
else{
    document.body.attachEvent('onclick',yourHandler);//for IE
}
function yourHandler(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/keyword/))
    {
        //an element with the keyword Class was clicked
    }
}

如果你使用像jquery这样的跨浏览器库:

<div class="myClass">sample</div>
<div class="myClass">sample 2</div>

JS:

function theFuncToCall(event){
  //func code
}
$(document).on('click', '.myClass', theFuncToCall);

var buttons = document.querySelectorAll(".MyClassName");
var i = 0, length = buttons.length;
for (i; i < length; i++) {
    if (document.addEventListener) {
        buttons[i].addEventListener("click", function() {
            // use keyword this to target clicked button
        });
    } else {
        buttons[i].attachEvent("onclick", function() {
            // use buttons[i] to target clicked button
        });
    };
};

这个答案有点矫枉过正，但它应该向您展示了以"现代"方式构建代码的方法，即使您仍然针对旧浏览器

1. 编写代码添加事件监听器，使新旧浏览器之间的差异最小

   var listen = (function () { // will return the handler for use in unlisten
       if (window.addEventHandler) {
           return function (node, type, handler) {
               node.addEventListener(type, handler);
               return handler;
           };
       } else if (window.attachEvent) {
           return function (node, type, handler) {
               var fn = function (e) {
                   if (!e) {
                       e = window.event;
                   }
                   if (!e.target && e.srcElement) {
                       e.target = e.srcElement;
                   }
                   return handler.call(this, e);
               };
               node.attachEvent('on' + type, fn);
               return fn;
           };
       } else {
           throw new Error('Events not supported in this environment');
           // or
        // return function ... node['on' + type] = function () { ... };
       }
   }());
   

   如果你想反过来写

   var unlisten = (function () { // use handler given by listen
       if (window.removeEventListener) {
           return function (node, type, handler) {
               node.removeEventListener(type, handler);
           };
       } else if (window.detachEvent) {
           return function (node, type, handler) {
               node.detachEvent('on' + type, handler);
           };
       } else {
           throw new Error('Events not supported in this environment');
           // or
        // return function ... node['on' + type] = null;
       }
   }());
   

2. 写你的点击处理程序

   function clickHandler(e) {
       // do stuff
   }
   

3. 将单击处理程序包装在函数中，以只选择具有正确类的按钮上的单击

   function wrappedClickHandler(e) {
       var tokens, i;
       if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
           return;
       }
       tokens = (e.target.className || '').split(' ');
       for (i = 0; i < tokens.length; ++i) {
           if (tokens[i] === 'theClassTokenWeWant') {
               return clickHandler.call(this, e);
               // or
            // return clickHandler.call(e.target, e);
           }
       }
   }
   

4. 将此作为侦听器添加到公共祖先节点

   var h = listen(document, 'click', wrappedClickHandler);
   // .. later, if desired
   unlisten(document, 'click', h);
   

编写事件委托函数的更简单的方法是将其添加到按钮的容器中吗?例如,

// Select Container Element
const questionContainer = document.querySelector(".container");
// Listen For Clicks Within Container
questionContainer.onclick = function (event) {
    // Prevent default behavior of button
    event.preventDefault();
    // Store Target Element In Variable
    const element = event.target;
    // If Target Element Is a Button
    if (element.nodeName === 'BUTTON') {
        // Event Code
    }
}