JavaScript：具有相同类名的多个按钮的事件侦听器 [英] JavaScript: Event listener for multiple buttons with same class name

问题描述

我正在使用JavaScript构建决策树。我没有为这个项目提供jQuery。

I'm building a decision tree in JavaScript. I do not have jQuery available to me for this project.

我希望能够将按钮放在决策树的任何地方（隐藏或显示在任何地方页面），具有相同的类名。然后，JS端的监听器将运行一个函数。

I would like to be able to have buttons, placed anywhere in the decision tree (Hidden or displayed anywhere on the page), with the same class name. The listener on the JS side would then run a function.

这是我正在使用的基于ID的侦听器。它运作良好，但我需要能够有多个具有相同类或名称的按钮。虽然我已经看到了这方面的例子，但我无法让它正常运行。

Here is what I am using for and ID based listener. It works well but I need to be able to have multiple buttons with the same class or name available. Although I have seen examples of this, I cannot get it to function properly.

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。

This also needs to work in as many versions of IE as possible. For single class handling I'm using querySelectorAll.

推荐答案

你真正想要的是 JavaScript事件委派。在你的情况下，你有BUTTON元素，我将假设它是< button> 标签。现在您想知道何时单击其中一个按钮然后运行一个函数：

What you are really looking for is JavaScript Event Delegation. In your case, you have BUTTON elements, which I'm going to assume are <button> tags. Now you want to know when one of those buttons was clicked and then run a function:

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 函数。

Anywhere on the page that a <button class="foo">...</button> element appears, clicking it, or any HTML tag inside of it, will run the doSomething function.

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

Update: Since Event Delegation is used, only a single click handler is registered on the document object. If more <button>s are created as a result of an AJAX call, you don't have to register click handlers on those new <button>s since we take advantage of the click event bubbling up from the element the user clicked on to the document object itself.

这篇关于JavaScript：具有相同类名的多个按钮的事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！