javascript 将事件侦听器添加到 HTML 元素集合

Add Event Listener to Collection of HTML Elements

提问by Josan Iracheta

I know that getElementsByTagNameand getElementsByClassNameneed an index identifier in order for the objects to be bound to an event listener.

我知道getElementsByTagName并且getElementsByClassName需要一个索引标识符才能将对象绑定到事件侦听器。

So the question is, how do I add an event listener to a collection of HTML elements found usinggetElementsByTagNameorgetElementsByClassName?

所以问题是，如何将事件侦听器添加到使用getElementsByTagName或找到的 HTML 元素集合中getElementsByClassName？

<input class="inputs" type="submit" value="Hello" />
<input class="inputs" type="submit" value="World" />

var inputElem = document.getElementsByTagName('input');
inputElem.addEventListener('click', function(){
    alert(this.value);
}, false);

I know how to do this in jQuery, but I want to know how to do it with pure JS.

我知道如何在 jQuery 中执行此操作，但我想知道如何使用纯 JS 执行此操作。

采纳答案by Rakesh_Kumar

Adding eventlistener to each of them is not advisable. May be this can help:

不建议将事件侦听器添加到它们中的每一个。可能这可以帮助：

http://jsfiddle.net/b8gotLL6/

http://jsfiddle.net/b8gotLL6/

document.getElementById('parent').addEventListener('click', function(e){
alert(e.target.value);
})

And if you only want to do using getElementsByTagNameor getElementsByClassName, then i guess you need to iterate for the array returned.

如果您只想使用getElementsByTagName或 getElementsByClassName，那么我想您需要迭代返回的数组。

回答by atxpunkrock

It's pretty simple like @Rutwick Gangurde said. Once you get the elements you just need to loop through and attach the event.

正如@Rutwick Gangurde 所说，这非常简单。一旦你得到元素，你只需要循环并附加事件。

var inputElem = document.getElementsByTagName('input');

for(var i = 0; i < inputElem.length; i++) {

    inputElem[i].addEventListener('click', function(){
        alert(this.value);
    }, false);
}

Here it is in a fiddle: http://jsfiddle.net/wm7p0a77/

这是一个小提琴：http: //jsfiddle.net/wm7p0a77/

回答by Adi

Try querySelectorAllmethod.

尝试querySelectorAll方法。

var inputElem = document.querySelectorAll('input');

Which returns a NodeListand you can loop through the array to add the event listeners.

它返回 aNodeList并且您可以遍历数组以添加事件侦听器。

回答by Suchit kumar

you can try like this:first get all the element of the particular type the loop through it.

你可以这样尝试：首先通过它获取特定类型的所有元素。

var elems = document.getElementsByClassName('inputs');
for(var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function(){
        alert(this.value);
    }, false);
}

<input class="inputs" type="submit" value="Hello" />
<input class="inputs" type="submit" value="World" />

回答by Derrick Dennis

First, use getElementsByClassName, instead of getElementsByTagName. Then Loop through them, adding the event listener like this:

首先，使用 getElementsByClassName，而不是 getElementsByTagName。然后循环遍历它们，像这样添加事件侦听器：

var inputElem = document.getElementsByClassName('inputs');
var i;
for (i = 0; i < inputElem .length; i++) {
    inputElem [i].addEventListener('click', (function(i) {
        return function() {
           alert(this.value);
        };
    })(i), false);
}

Here it is on jsfiddle

这是在jsfiddle 上

回答by Rutwick Gangurde

You can use the class too as a selector.

您也可以将类用作选择器。

var elems = document.getElementsByClassName('inputs');

Then loop over these to attach event handlers.

然后循环这些以附加事件处理程序。

回答by Rinoy R K

var i=0, inputElem = document.getElementsByTagName('input'), len = inputElem.length;    
while(i < len){
  inputElem[i].addEventListener('click', function(){
      alert(this.value);
  }, false);
 i++;
}

回答by Alok Ranjan

You can use delegates to implement this. Get hold of a parent element to these inputs and add an event listener to that parent element. This way you will be just attaching one event and make use of event bubbling to accomplish your task. In that event listener, you might have to check the target of the event and if that target equals the input element, you can run your logic inside this condition.

您可以使用委托来实现这一点。获取这些输入的父元素并将事件侦听器添加到该父元素。通过这种方式，您只需附加一个事件并利用事件冒泡来完成您的任务。在该事件侦听器中，您可能必须检查事件的目标，如果该目标等于输入元素，则可以在此条件内运行您的逻辑。

You can do something like this in your event handler function.

你可以在你的事件处理函数中做这样的事情。

// ...
// get event and source element e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== "input") {
    return; 
}
// ...