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

13
задан Arjun 1 July 2017 в 09:47
поделиться

2 ответа

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

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

Из Mozilla Developer central:

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

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

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

10
ответ дан 2 December 2019 в 01:57
поделиться

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

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

pixels.onkeydown = updateNode;

- это естественное выражение языка сценариев ECMA, и:

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

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

-4
ответ дан 2 December 2019 в 01:57
поделиться
Другие вопросы по тегам:

Похожие вопросы: