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