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

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>上注册单击处理程序,因为我们利用了从用户单击的元素向文档对象本身冒泡的单击事件。

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

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

基础教程推荐