Question

我正在尝试编写一个可以针对任何网站运行的脚本，所以我不想使用任何内联onchange方法。只要正在创建的inputCollection发生更改，脚本就会触发。

当我运行下面的代码片段时，我会立即迭代并输出所有输入字段及其值。但在“改变”没有任何反应。

所以有两个问题：我希望它只输出改变的输入。我希望它只能在“改变”事件上运行

对于我在这里做错了什么见解？这是一个小提琴。 http://jsfiddle.net/owq4n2eg/

 (function () {
 var inputCollection = document.getElementsByTagName("input");
 for(var i=0;i<inputCollection.length;i++)
 {
     inputCollection[i].addEventListener("change",console.log("name:" + inputCollection[i].name + ",value:"+inputCollection[i].value),false);

 };
 })();

谢谢！

Answer 1

Yea tymeJV的答案有效，但在我看来，这并不理想。

(function(){
    var inputCollection = document.getElementsByTagName("input");
    for (var i = 0; i < inputCollection.length; i++) {
        inputCollection[i].addEventListener("change", handleFunction , false);
    }
})();

function handleFunction(event){
    console.log("name: " + event.srcElement.name + ', value: ' + event.srcElement.value);
}

jsfiddle

从event.srcElement中获取值更清晰。应该只使用inputCollection来分配监听器，而不是输出值。

Answer 2

好吧，你需要将你的循环包装在一个闭包中，否则你总是会使用最后一个元素。监听器还具有以下功能：

 (function () {
     var inputCollection = document.getElementsByTagName("input");
     for (var i = 0; i < inputCollection.length; i++) {
         (function(i) {
             inputCollection[i].addEventListener("change", function() {
                 console.log("name:" + inputCollection[i].name + ",value:" + inputCollection[i].value);
             }, true);
         })(i)
     }
})();

演示：http://jsfiddle.net/owq4n2eg/3/

JavaScript - 捕获“更改”到任何输入

2 个答案: