Слушатели событий 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?


javascript event-listener html dom-events eventhandler
person Kevin    schedule 07.02.2010    source источник

Ответы (2)


arrow_upward
10
arrow_downward

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

Параметр onxxxxx задает обработчику события эту функцию.

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

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

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

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

person Pekka    schedule 07.02.2010
comment
Я не упоминал об этом в вопросе, но когда я использовал обработчик в поле ввода, пиксели, он запускал функцию onxxxxx. Знаете, почему он не прикрепился? - person Kevin; 07.02.2010
comment
Я только что узнал, почему он не работает. Я использовал updateNode(), закончил читать сайт moz // Используя ссылку на функцию — обратите внимание на отсутствие '()' el.onclick = modifyText; - person Kevin; 07.02.2010

arrow_upward
-4
arrow_downward

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

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

pixels.onkeydown = updateNode;

является естественным оператором скриптового языка ECMA, и:

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

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

person PatlaDJ    schedule 07.02.2010