本文介绍了如何为具有相同类名的多个按钮添加事件侦听器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在用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
函数。
<button>
,则不必在这些新的<button>
上注册单击处理程序,因为我们利用了从用户单击的元素向文档对象本身冒泡的单击事件。
这篇关于如何为具有相同类名的多个按钮添加事件侦听器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!