这是我在jQuery中的代码：
$('.paragraph, .section, .heading').on('input', function (e) {
localStorage.setItem($(this).attr('id'), $(this).text());
});
是否有JavaScript的等效方法，可以一次性附加所有事件？
一次性将点击事件附加到多个元素上？
18
- SanJeet Singh
4
4个回答
40
您可以使用
querySelectorAll来选择多个元素，然后为每个元素添加事件监听器。var elements = document.querySelectorAll(".a, .b");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
console.log("clicked");
});
}
- Andrew Brooke
4
假设您想要为多个元素添加点击事件，则将它们的类名设置为例如
demo。demos= document.getElementsByClassName('demo');
for (var i = 0; i < demos.length; i++) {
demos[i].addEventListener('click',redirect,false);
}
function redirect(){
alert(this.id);
}
- Hemal
-1
致谢：
在多个元素上添加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>- user5613751
7
他要求JavaScript的等价物，你却给了他jQuery :P - Pedro Estrada
仅使用纯JavaScript... - Hemal
2那仍然是jQuery哈哈... - Pedro Estrada
好的@Hemal，让我们减少这篇帖子上的噪音。我的生日那天我过得不太好 :( - user5613751
1@PedroEstrada 你做得很好。 - Hemal
显示剩余2条评论
-4
$( "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>- devendra tata
1
2先阅读问题，他要求JavaScript的等效代码，而不是JQuery的。 - RegarBoy
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
document.body.addEventListener('click', function(e) { var target = e.target, class = target.className; if (class === 'paragraph' || class === 'section' || class === 'heading') { localStorage.setItem(target.id, target.innerText); } e.stopPropagation() });减少事件数量会提高性能..这个假设每个元素只有一个类..也许还有更高效的方法来检查正确的类，例如使用数组.. - Can Rau