的JavaScript的addEventListener 2个不同的输入

我现在有一个事件监听器，当输入改变像这样的火灾：的JavaScript的addEventListener 2个不同的输入

input = document.getElementById("inputfield1"); 
 

 
input.addEventListener("change", function(e) { 
 
    console.log("Do Something with inputfield1"); 
 
});

<input id="inputfield1">

我现在也想添加第二个输入，以便将事件如果inputfield2也发生变化，则被解雇。
我可以使用OR声明添加它吗？还是应该为第二个字段创建一个全新的事件侦听器？

来源

2017-08-30 fightstarr20

所以另一个事件绑定到另一个元素..... – epascarello

只要定义为事件侦听器命名功能，并使用相同的一个你喜欢的任何元素。 – Redu

或者你可以谷歌你的问题的标题！ – undefined

您必须明确附加每个元素的事件处理程序。下面有一个片段，它显示了你如何做到这一点。

document.querySelectorAll('.jsInputField') 
 
     .forEach(function(element){ 
 
       element.addEventListener('change', function(event){ 
 
        var elementId = event.currentTarget.getAttribute('id') 
 
        console.log("Do Something with " + elementId); 
 
       }); 
 
     });

<input id="inputfield1" class="jsInputField"> 
 
<input id="inputfield2" class="jsInputField">

更新

正如拉姆指出在他的评论，NodeList.prototype.forEach，是从最新的浏览器都支持（如铬51等）的NodeList的方法。欲了解更多信息，请看看here。

为了避免在上面的链接中使用上面提到的polyfill来处理不支持此方法的情况，可以使用简单的for语句。

来源

2017-08-30 19:46:07 Christos

值得一提的是'NodeList.prototype.forEach'是一种不被广泛支持的新方法！ – undefined

@Ram谢谢你的评论！我会更新我的帖子。 – Christos

@Ram我同意，但它可能没有做任何比'Array.from（nodeList）.forEach（）' – Redu

function f(element) { console.log(element.id, element.value); }

<input id="inputfield1" onchange="f(this)"> 
 
<input id="inputfield2" onchange="f(this)">

或

function f(event) { 
 
    var element = event.currentTarget 
 
    console.log(element.id, element.value) 
 
} 
 

 
document.getElementById("inputfield1").addEventListener("change", f) 
 
document.getElementById("inputfield2").addEventListener("change", f)

<input id="inputfield1"> 
 
<input id="inputfield2">

来源

2017-08-30 20:02:23 Slai

使用querySelectAll（）和用于循环

function myFunction(){ 
 
    input =document.querySelectorAll("#inputfield1 , #inputfield2"); 
 
    var i; 
 
    for (i = 0; i <input.length; i++) { 
 
    input[i].addEventListener("keypress", function() { 
 
     alert("hi from"+this.id); 
 
    }); 
 
    } 
 
    } 
 
    myFunction();

<input id="inputfield1"> 
 
    <input id="inputfield2">

来源

2017-08-30 20:14:34 Osama

的JavaScript的addEventListener 2个不同的输入

回答

相关问题