Javascript addEventListener функция

158
11

Я новичок в обработчиках событий, и я столкнулся с кодом, который написан ниже


document.addEventListener("DOMContentLoaded", function() {
initialiseMediaPlayer();
}, false);

Есть ли разница в написании того же кода, что и


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

В конечном счете мы вызываем одну и ту же функцию, так что это имеет значение или есть ли преимущество в написании этого в соответствии с вышеизложенным способом?

спросил(а) 2021-01-25T18:57:55+03:00 5 месяцев назад
1
Решение
296

document.addEventListener("DOMContentLoaded", function() {
initialiseMediaPlayer();
}, false);

Выполняет initialiseMediaPlayer при загрузке содержимого dom.


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

является синтаксической ошибкой; если вы удалите точку с запятой:


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

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

Вы можете сделать


    document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

(удалите круглые скобки = вызов функции). Затем initialiseMediaPlayer будет выполняться на загруженном dom-содержимом и действовать по желанию.


Однако, в отличие от первого случая, initialiseMediaPlayer фактически получит аргументы, данные браузером. Кроме того, его возвращаемое значение принимается браузером. В случае DOMContentLoaded, скорее всего, это не имеет большого значения.


Вы также избегаете создания дополнительной анонимной функции, если вы передаете непосредственно initialiseMediaPlayer. Опять же, эффект не очень заметен с точки зрения пользователя.

ответил(а) 2021-01-25T18:57:55+03:00 5 месяцев назад
147

1). Да, есть большая разница. Вторая версия вызовет ошибку. Но даже если вы исправите это так:


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false);

initialiseMediaPlayer не будет вызываться на DOMContentLoaded, потому что () заставляет его выполнять немедленно, в то время как вам нужно передать рефезию функции, а не ее результат.

2). Другим существенным отличием является контекст вызова.


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false);

initialiseMediaPlayer будет вызываться в контексте объекта document. Хотя первая версия будет вызвана в контексте объекта Window.

ответил(а) 2021-01-25T18:57:55+03:00 5 месяцев назад
132

Второй аргумент функции addEventListener() принимает функцию типа. Поэтому вы не можете передать initialiseMediaPlayer();, потому что это вызов функции.


Что вы можете сделать:


var onDOMContentLoaded = function() {
initialiseMediaPlayer();
};
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false);

ответил(а) 2021-01-25T18:57:55+03:00 5 месяцев назад
45

в первом случае


document.addEventListener("DOMContentLoaded", function() {
initialiseMediaPlayer();
}, false);

анонимная функция function(){initialiseMediaPlayer();} регистрируется для запуска, когда запускается событие документа "DOMContentLoaded"


во втором случае:


document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false);

то, что зарегистрировано как прослушиватель событий, является результатом выражения initialiseMediaPlayer()


Итак, да, есть разница:)

ответил(а) 2021-01-25T18:57:55+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема