JavaScript:具有相同类名的多个按钮的事件侦听器

Question

我正在使用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.

Answer 1

您真正需要的是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功能.

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