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

Question

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

    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?

Answer 1

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

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

Из Центральная часть Mozilla для разработчиков :

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

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

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

Answer 2

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

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

pixels.onkeydown = updateNode;

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

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

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