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

本教程将介绍如何为具有相同类名的多个按钮添加事件侦听器?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么为具有相同类名的多个按钮添加事件侦听器? 教程 第1张

问题描述

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

好了关于怎么为具有相同类名的多个按钮添加事件侦听器?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。