Присоединение одного события к нескольким элементам, хранящимся в массиве, нативном JS

Question

Вопрос о полном новичке, да, но я нигде не мог найти ответ. Или, возможно, мой английский недостаточно хорош, чтобы дать Google правильный запрос. Каждый предлагает какой-то фреймворк, но я хотел бы знать, как это можно сделать в нативном JavaScript. Я пробовал этот код и некоторые другие вещи, без эффекта. Кажется, я не знаю какой-то базовой концепции. Любая помощь будет оценена.

window.onload = function() {
    var trCurrent
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    function hl() {
            trCurrent.setAttribute('class', 'highlight');
    };
    for (var x = 0; x < tr.lenght; x++) { 
        trCurrent = tr[x];
        trCurrent.addEventListener ('mousedown', hl, false);
    }
};

Answer 1

• Вы должны изменить trCurrent на this на вашем function h1, потому что trCurrent указывает на последний определенный элемент TR (trCurrent = tr[x] для высокого x).
• Используйте .length вместо .lenght.

Финальный код:

window.onload = function() {
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    function hl() {
        this.setAttribute('class', 'highlight');
    };
    for (var x = 0; x < tr.length; x++) { 
        tr[x].addEventListener ('mousedown', hl, false);
    }
};

Если вы хотите использовать переменную, которая может изменяться во время цикла, необходимо обернуть тело в (анонимную) функцию:

window.onload = function() {
    var main = document.getElementById('main');
    var tr = main.getElementsByTagName('tr');
    for (var x = 0; x < tr.length; x++) {

        (function(trCurrent){ //Anonymous wrapper, first argument: `trCurrent`
            function hl() {
                trCurrent.setAttribute('class', 'highlight');
            };
            trCurrent.addEventListener ('mousedown', hl, false);
        })(tr[x]); //Passing a reference to `tr[x]`
    }
};