Слушатели событий 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, которое ненужно сбивает с толку многих разработчиков, заставляя их думать, что произойдет, если вы установите его один раз первым способом, а какой-то другой скрипт позже потенциально может установить его другим способом :)