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

How can I add an event listener for multiple buttons with same class name?(如何为具有相同类名的多个按钮添加事件侦听器？)

问题描述

我正在用JavaScript构建决策树。我没有可用于此项目的jQuery。

我希望能够将按钮放置在决策树中的任何位置(隐藏或显示在页面上的任何位置)，具有相同的类名。然后，JS端的侦听器将运行一个函数。

以下是我使用的基于ID的侦听器。它工作得很好，但我需要能够有多个按钮与相同的类别或名称可用。虽然我见过这种情况的示例，但我无法使其正常运行。

function q1a1() {
var q1a1button = document.getElementById("q1answer1");
        if(q1a1button.addEventListener){
q1a1button.addEventListener("click", function() { q1answer1();}, false);
        } else if(q1a1button.attachEvent){
q1a1button.attachEvent("onclick", function() { q1answer1();});
}
};

if(window.addEventListener){
    window.addEventListener("load", q1a1, false);
        } else if(window.attachEvent){
    window.attachEvent("onload", q1a1);
        } else{
    document.addEventListener("load", q1a1, false);                
}

function q1answer1() {          

//DO SOME STUFF
                                            }

这还需要在尽可能多的IE版本中工作。对于单个类处理，我使用querySelectorAll。

推荐答案

您真正要找的是JavaScript Event Delegation。在您的例子中，您有按钮元素，我假定它们是<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>，则不必在这些新的<button>上注册单击处理程序，因为我们利用了从用户单击的元素向文档对象本身冒泡的单击事件。

这篇关于如何为具有相同类名的多个按钮添加事件侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！