具有相同类的多个按钮的Javascript点击事件

我在构建的站点上有几个按钮，某些按钮有一个类，而其他按钮有另一个类。我想做的是找到找到单击按钮的最佳方法，而不必为每个按钮都设置事件侦听器。我已经提出了下面的2个for循环来查找所有带有类button-1和类button-2的按钮。作为一名javascript新手，我不想养成坏习惯，因此，如果您能就实现这一目标的最佳方法提供建议，我将不胜感激

<section>
  <div class="button--1"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>

<section>
  <div class="button--2"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>

 var button1 = document.querySelectorAll('.button--1');
    var button2 = document.querySelectorAll('.button--2');

    for (var a = 0; a < button1.length; a++) {    
        button1[a].addEventListener('click',function(){
            //do something
        });
    }

    for (var b = 0; b < button2.length; b++) {
        button1[b].addEventListener('click',function(){
            //do something
        });
    }

var button1=document.queryselectoral（'.button--1'）；
var button2=document.queryselectoral（'.button--2'）；
对于（var a=0；a

您可以在

querySelctorAll（）

字符串中使用多个选择器，方法是使用

，

var button1=document.queryselectoral（'.button--1'）；
var button2=document.queryselectoral（'.button--2'）；
var allButtons=document.queryselectoral（'.button--1，.button--2'）；
控制台.日志（按钮1.长度）；
控制台.日志（按钮2.长度）；
控制台。日志（所有按钮。长度）
在单个元素上按下并释放定点设备按钮（通常是鼠标的主按钮）时，将触发
单击事件

如果您计划使用多个其他类，如
按钮--3
，
…4
，
，
…15
，

必须使用“按钮”将类启动的所有
div
元素（
^=
）作为目标：

（请注意，您也可以在CSS中执行此操作！）


var allButtons=document.querySelectorAll（'div[class^=button]）；
log（“Found”、allButtons.length、“div”哪个类以“button”开头）；
对于（变量i=0；i

/*一些样式*/
部分{
利润率：8px0；
边框：1px纯色灰色；
}
分区{
边框：1px实心浅灰色；
显示：内联块；
左边距：8px；
填充：4px8px；
宽度：30px；
}
节分区[类^=按钮]{
背景：浅灰色；
光标：指针；
}
您可以单击以下按钮：
s1-1
s1-2
s1-3
s1-4
s2-1
s2-2
s2-3
s2-4
不是1
不是2
不是3
不是4
尝试使用


（函数（）{
document.body.addEventListener（“单击”，单击按钮）；
//^1个用于所有单击的处理程序
功能点击按钮（evt）{
const from=evt.target；
console.clear（）；
如果（！from.className | |！/按钮--\d/i.test（from.className））{return；}
//^检查单击的元素是否是要处理的元素之一
//如果它不是一个“按钮”，什么也不要做
log（“您单击了”+from.classList）；
}
}（））
.button--1:之前，
.按钮--2:之前{
内容：“BTTN['attr（class）'”；
}
.按钮--1，
.按钮--2{
边框：1px实心#999；
背景：#eee；
宽度：220px；
填充：3倍；
文本对齐：居中；
}

我的建议是使用，以便您可以这样做：

$(document).on('click', '.button--1', function() {
   // Do something
});

$(document).on('click', '.button--1', function() {
   // Do something
})

但是纯Javascript的一种干净方法是创建一个绑定事件回调的函数

function bindEvent(callback, eventType, targets) {
   targets.forEach(function(target) {
     target.addEventListener(eventType, callback);
   });
};


var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');

bindEvent(function() {
   // do something
}, 'click', button1);

bindEvent(function() {
   // do something
}, 'click', button2);

我在这里找不到任何按钮。我一定会查清楚的。谢谢你的链接和片段