一次将点击事件附加到多个元素？ [复制]答案

【问题标题】：Attaching a click event to multiple elements at once? [duplicate]一次将点击事件附加到多个元素？ [复制]
【发布时间】：2015-12-30 13:01:11
【问题描述】：

这是我在 jQuery 中的代码：

$('.paragraph, .section, .heading').on('input', function (e) {
   localStorage.setItem($(this).attr('id'), $(this).text());
});

是否有任何等效的 JavaScript 可以一次附加所有事件？

【问题讨论】：

(元素).addEventListener('click',function(){});在一次迭代中
答案是否定的，在纯 javascript 中没有等价物，您必须遍历元素并将事件处理程序分别附加到每个元素
我会在父元素上使用一个侦听器（如果需要，为主体），然后像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() }); 那样检查被点击的元素，减少事件会更高效.. 这假设元素只有每个班级..也许有更有效的方法检查正确的班级，例如使用数组..
here 更具可读性

标签： javascript jquery

【解决方案1】：

您可以将 querySelectorAll 与多个元素选择器一起使用，然后将事件侦听器添加到每个选择器中

var elements = document.querySelectorAll(".a, .b");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", function() {
    console.log("clicked");
  });
}

【讨论】：

【解决方案2】：

假设您想为多个元素添加点击事件，然后将它们的类名设置为例如demo

demos= document.getElementsByClassName('demo');
for (var i = 0; i < demos.length; i++) {
    demos[i].addEventListener('click',redirect,false);
}
function redirect(){
    alert(this.id);
}

WORKING FIDDLE

【讨论】：

【解决方案3】：

功劳归于：

Javascript click event listener on multiple elements and get target 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>

【讨论】：

他要求 javascript 等价物，你给了他 jquery :P
纯 javascript...
那仍然是 jQuery 哈哈...
.on, .click 不是javascript。
@PedroEstrada 你成功了。

【解决方案4】：

Read Jquery Multiple Selector

$( "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>

【讨论】：

先阅读问题，他要求的是 JavaScript 等价物，而不是 JQuery。