События JavaScript | Руководство по веб-разработке

Введение

Добро пожаловать в документацию по JavaScript! В этом практическом занятии вы познакомитесь с событиями.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/data_types -.-> lab-106901{{"Введение в события JavaScript"}} javascript/comp_ops -.-> lab-106901{{"Введение в события JavaScript"}} javascript/functions -.-> lab-106901{{"Введение в события JavaScript"}} javascript/closures -.-> lab-106901{{"Введение в события JavaScript"}} javascript/dom_select -.-> lab-106901{{"Введение в события JavaScript"}} javascript/event_handle -.-> lab-106901{{"Введение в события JavaScript"}} javascript/bom -.-> lab-106901{{"Введение в события JavaScript"}} end

События

В ВМ уже предоставлен 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, чтобы улучшить свои навыки.