Question

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

所以问题是，如何将事件监听器添加到使用 getElementsByTagName 或 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);

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

Answer 1

不建议在每个中添加eventlistener。可能会有所帮助：

http://jsfiddle.net/b8gotLL6/

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

如果你只想使用 getElementsByTagName 或 getElementsByClassName ，那么我猜你需要为返回的数组进行迭代。

Answer 2

像@Rutwick Gangurde说的那样非常简单。获得元素后，您只需循环并附加事件。

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

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

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

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

Answer 3

尝试querySelectorAll方法。

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

返回一个数组，您可以遍历数组以添加事件侦听器。

Answer 4

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

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

然后遍历这些以附加事件处理程序。

Answer 5

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

Answer 6

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

您可以在事件处理函数中执行类似的操作。

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

Answer 7

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

首先，使用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);
}

此处位于jsfiddle

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

8 个答案: