Слушатели событий в JavaScript и обработчики событий

Хорошо, я уже давно пытаюсь понять это, и, наконец, у меня есть время для расследования. Как говорится в заголовке "В чем разница"? Я знаю, что это работает так, как я этого хочу.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

Но это не так и работает только один раз.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

Что мне не хватает... В чем разница? Любые ссылки на эту тему будут полезны.

Мое предположение заключалось в том, что обработчик должен действовать как слушатель, но это не так. На самом деле нужно ли добавлять слушателя к функции addLoadEvent?

Ответ 1

addEventListener добавляет функцию события к событию. Таким образом может существовать неограниченное количество обработчиков событий.

Настройка onxxxxx устанавливает обработчик события в эту функцию.

Из Центра разработчика Mozilla:

addEventListener регистрирует один прослушиватель событий на одной цели. Целевой объект может быть единственным node в документе, самом документе, окне или XMLHttpRequest.

Чтобы зарегистрировать более одного прослушивателя событий для цели, вызовите addEventListener для одной и той же цели, но с разными типами событий или параметрами захвата.

И посмотрите эту главу того же документа для сравнения старого onxxxx способа.

Ответ 2

Поскольку ECMA script настолько гибок в своем ядре, что позволяет назначать функции, методы... практически все... переменной, имеющей дополнительную функциональность для присоединения функции к переменной, такой как "addEventListener", мое все означает плохой дизайн.

Итак, если вы спросите меня, я расскажу вам все, что сказал Пекка, и я согласен полностью, а также что:

pixels.onkeydown = updateNode;

является ECMA script языковым естественным утверждением и:

pixels.addEventListener("keydown", updateNode, true);

является избыточным дополнением DOM, которое излишне смущает многих разработчиков, заставляя их думать, что произойдет, если вы установите его по первому пути, а некоторые другие script позже могут установить его другим способом:)