Javascript 一次将点击事件附加到多个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34522988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Attaching a click event to multiple elements at once?
提问by SanJeet Singh
Here is my code in jQuery:
这是我在 jQuery 中的代码：
$('.paragraph, .section, .heading').on('input', function (e) {
localStorage.setItem($(this).attr('id'), $(this).text());
});
Is there any JavaScript equivalent where I could attach all events at once?
是否有任何等效的 JavaScript 可以一次附加所有事件？
回答by Andrew Brooke
You could use querySelectorAllwith your multiple element selectors, then add the event listeners to each one
您可以使用querySelectorAll多个元素选择器，然后将事件侦听器添加到每个元素选择器
var elements = document.querySelectorAll(".a, .b");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
console.log("clicked");
});
}
回答by Hemal
Suppose you want to add click event to multiple elements, then set their class name as for example demo
假设你想为多个元素添加点击事件，然后将它们的类名设置为例如 demo
demos= document.getElementsByClassName('demo');
for (var i = 0; i < demos.length; i++) {
demos[i].addEventListener('click',redirect,false);
}
function redirect(){
alert(this.id);
}
回答by Hemal
Credit goes to:
归功于：
Javascript click event listener on multiple elements and get target ID
多个元素上的Javascript单击事件侦听器并获取目标ID
articles = document.getElementsByTagName('button');
for (var i = 0; i < articles.length; i++) {
articles[i].addEventListener('click',redirect,false);
}
function redirect(){
alert(this);
}<button></button>
<button></button>回答by devendra tata
$( "div, span, p.myClass" ).css( "border", "3px solid red" );div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>