Введение
Добро пожаловать в документацию по JavaScript! В этом практическом занятии вы познакомитесь с событиями.
This tutorial is from open-source community. Access the source code
💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
Добро пожаловать в документацию по JavaScript! В этом практическом занятии вы познакомитесь с событиями.
В ВМ уже предоставлен
index.html
.
Реальная интерактивность на веб-сайте требует обработчиков событий. Это структуры кода, которые слушают активность в браузере и выполняют код в ответ. Наиболее очевидный пример - это обработка события клика, которое срабатывает в браузере при нажатии на что-то мышью. Чтобы продемонстрировать это, введите следующее в консоль, а затем кликните по текущей веб-странице:
document.querySelector("html").addEventListener("click", function () {
alert("Ouch! Stop poking me!");
});
Есть несколько способов прикрепить обработчик событий к элементу.
Здесь мы выбираем элемент <html>
. Затем мы вызываем его функцию addEventListener()
, передав имя события для прослушивания ('click'
) и функцию для выполнения при наступлении события.
Функция, которую мы только что передали в addEventListener()
здесь, называется анонимной функцией, потому что у нее нет имени. Есть альтернативный способ записи анонимных функций, который мы называем стрелочной функцией.
Стрелочная функция использует () =>
вместо function ()
:
document.querySelector("html").addEventListener("click", () => {
alert("Ouch! Stop poking me!");
});
Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Поздравляем! Вы завершили практическое занятие по событиям. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.