Question

我目前有一个事件监听器，当输入改变时会触发：

＆＃13;

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

＆＃13;

<input id="inputfield1">

＆＃13;

我现在还想添加第二个输入，以便在inputfield2发生变化时触发事件我可以使用OR语句添加它吗？或者我应该为第二个字段创建一个全新的事件监听器吗？

Answer 1

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

Answer 2

您必须为每个元素显式附加事件处理程序。下面是一个片段，其中显示了如何执行此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

正如Ram在他的评论NodeList.prototype.forEach中指出的那样，NodeList的方法是最新浏览器支持的方法（例如Chrome 51等）。有关详细信息，请查看here。

为了避免使用上面链接中提供的polyfill，以了解不支持此方法的情况，您可以使用简单的for语句。

Answer 3

use querySelectAll() and for loop

$sites_arr

['A','B','C',...]

用于2个不同输入的JavaScript addEventListener

3 个答案: