Question

这里我有四个输入按钮，我想为每个按钮添加事件处理程序。如果我使用for循环我必须处理闭包。实际上我试图理解如何管理forEach方法的数组像object.This是我可以管理的最接近的解决方案。如果我们想要使用数组方法，我们必须遇到与闭包相关的问题。我必须使用object.keys来获取索引并在它们上应用forEach。虽然听起来很奇怪但我不太对此解决方案感到满意。可以更简单吗？我如何直接在存储在Buttons变量中的nodeList上管理forEach

function change(){
    var buttons=document.getElementsByTagName('input');
    var keys=Object.keys(buttons);

    keys.forEach(function(el,indx,arr){
        if(el != 'length'){
            this[el].addEventListener('click', function(e){ 
                alert(e.target.value);
            });
        }
    }, buttons);
}

change();

<input type='button' value='button1'> 
<input type='button' value='button2'> 
<input type='button' value='button3'> 
<input type='button' value='button4'>

Answer 1

document.getElementsByTagName会返回一个＆＃34;主机对象＆＃34;。这些对象在浏览器之间的行为可能不同。

buttons是NodeList，不是数组。 Object.keys可能无法在此处按预期工作，因为它可能具有更多属性，而不仅仅是索引和length。

NodeList（https://developer.mozilla.org/en-US/docs/Web/API/NodeList）的文档有一些示例可将其转换为数组以及如何将其与.forEach一起使用。

我通常使用的方法未在文档页面上列出。我通常使用：

var arr = Array.prototype.slice.call(buttons);

_{有关详细信息，请参阅此问题：Fastest way to convert JavaScript NodeList to Array?}

然后你可以这样做：

arr.forEach(function(el){
    el.addEventListener('click', function(e){ 
        alert(e.target.value);
    });
});

这是一个演示：

＆＃13;

var buttons = document.getElementsByTagName('input');
var arr = Array.prototype.slice.call(buttons);
arr.forEach(function(el) {
  el.addEventListener('click', function(e) {
    alert(e.target.value);
  });
});

＆＃13;

<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>

＆＃13;

Answer 2

ES6解决方案

ES6 Array.from方法可以将类似数组的对象直接转换为数组：

    var buttons = document.getElementsByTagName('input');

    Array.from(buttons).forEach(el=>{
      el.addEventListener('click', e =>{
        alert(e.target.value);
      });
    });

<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>

在javascript中对数组中的对象应用forEach方法

2 个答案: