[英]Javascript on click event for multiple buttons with same class
I have a few buttons across a site I am building, certain buttons have one class while others have another.我在我正在构建的网站上有几个按钮,某些按钮有一个类,而其他按钮有另一个。 What I am trying to do is find the best way to find the clicked button without having an event listener for each individual button.我想要做的是找到找到点击按钮的最佳方法,而无需为每个单独的按钮设置事件侦听器。 I have come up with the below 2 for loops to find all the buttons with class button-1 and class button-2.我想出了以下 2 个 for 循环来查找所有具有 button-1 类和 button-2 类的按钮。 Being fairly new to javascript i just don't want to get into bad habits so would appreciate any advice on the best way to achieve this.作为 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
});
}
If you plan to have multiple other classes like button--3
, …4
… …15
,如果您计划拥有多个其他类,例如button--3
, …4
… …15
,
You must want to target all div
elements which class starts ( ^=
) with "button":您必须希望以“button”为目标,以类开头( ^=
)的所有div
元素为目标:
(Note that you can do it in the CSS too!) (请注意,您也可以在 CSS 中执行此操作!)
var allButtons = document.querySelectorAll('div[class^=button]'); console.log("Found", allButtons.length, "div which class starts with “button”."); for (var i = 0; i < allButtons.length; i++) { allButtons[i].addEventListener('click', function() { console.clear(); console.log("You clicked:", this.innerHTML); }); }
/* Some styling */ section { margin: 8px 0; border: 1px solid gray; } section div { border: 1px solid lightgray; display: inline-block; margin-left: 8px; padding: 4px 8px; width: 30px; } section div[class^=button] { background: lightgray; cursor: pointer; }
<span>You can click on the buttons:</span> <section> <div class="button--1">s1-1</div> <div class="button--2">s1-2</div> <div class="button--3">s1-3</div> <div class="button--4">s1-4</div> </section> <section> <div class="button--1">s2-1</div> <div class="button--2">s2-2</div> <div class="button--3">s2-3</div> <div class="button--4">s2-4</div> </section> <section> <div class="not-a-button">not1</div> <div class="not-a-button">not2</div> <div class="not-a-button">not3</div> <div class="not-a-button">not4</div> </section>
Hope it helps.希望能帮助到你。
Try using event delegation尝试使用事件委托
(function() { document.body.addEventListener("click", clickButtons); // ^ one handler for all clicks function clickButtons(evt) { const from = evt.target; console.clear(); if (!from.className || !/button--\\d/i.test(from.className)) { return; } // ^check if the element clicked is one of the elements you want to handle // if it's not one of the 'buttons', do nothing console.log("you clicked " + from.classList); } }())
.button--1:before, .button--2:before { content: 'BTTN['attr(class)']'; } .button--1, .button--2 { border: 1px solid #999; background: #eee; width: 220px; padding: 3px; text-align: center; }
<section> <div class="b1 button--1 section1"></div> <div class="b2 button--1 section1"></div> <div class="b3 button--2 section1"></div> </section> <section> <div class="b4 button--2 section2"></div> <div class="b5 button--1 section2"></div> <div class="b6 button--2 section2"></div> </section>
You can use multiple selectors in the string of querySelctorAll()
by separating them with a ,
您可以在querySelctorAll()
的字符串中使用多个选择器,方法是用,
var button1 = document.querySelectorAll('.button--1'); var button2 = document.querySelectorAll('.button--2'); var allButtons = document.querySelectorAll('.button--1, .button--2'); console.log(button1.length); console.log(button2.length); console.log(allButtons.length);
<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>
The click
event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.当在单个元素上按下并释放指针设备按钮(通常是鼠标的主按钮)时,将触发click
事件。
This documentation will help you to understand how it works MDN - Click event本文档将帮助您了解它是如何工作的MDN - 单击事件
My suggestion is to use jQuery so that you can do it something like this:我的建议是使用jQuery,以便您可以执行以下操作:
$(document).on('click', '.button--1', function() {
// Do something
});
$(document).on('click', '.button--1', function() {
// Do something
})
But a clean approach for pure Javascript is to create a function that binds a callback for the event.但是对于纯 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.