применить метод forEach к массиву, подобному объектам в javascript

Здесь у меня четыре кнопки ввода, и я хочу добавить обработчик событий для каждой из них. Если я использую цикл for, мне приходится иметь дело с замыканиями. На самом деле я пытаюсь понять, как управлять методом forEach для массива, такого как объект. Это ближайший решение, которым я могу управлять. Поскольку мы должны столкнуться с проблемой, связанной с закрытием, если мы хотим использовать методы массива. Мне пришлось использовать object.keys, чтобы получить индексы и применить к ним forEach. Хотя это звучит странно, но я не совсем удовлетворен этим Решение.Можно ли сделать это проще? Как я могу управлять forEach непосредственно в списке узлов, хранящемся в переменной Buttons

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


javascript arrays foreach nodelist
person AL-zami    schedule 14.01.2015    source источник
comment
Ознакомьтесь с NodeList.js   -  person Edwin Reynoso    schedule 08.08.2015

Ответы (2)


arrow_upward
4
arrow_downward

document.getElementsByTagName возвращает вам "объект-хозяин". Эти объекты могут различаться в поведении в разных браузерах.

buttons - это NodeList, а не массив. Object.keys здесь может работать не так, как ожидалось, потому что у него может быть больше свойств, чем только индексы и length.

Документация для NodeList (https://developer.mozilla.org/en-US/docs/Web/API/NodeList) есть несколько примеров его преобразования в массив и способов его использования с .forEach.

Метод, который я обычно использую, не указан на странице документации. Я обычно использую:

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

См. этот вопрос для получения дополнительной информации: Самый быстрый способ преобразовать JavaScript NodeList в массив?

Тогда вы сможете:

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

Вот демонстрация:

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);
  });
});
<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>

person Rocket Hazmat    schedule 14.01.2015

arrow_upward
4
arrow_downward

Решение 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'>

person AL-zami    schedule 19.07.2018