diff --git a/src/SUMMARY.md b/src/SUMMARY.md index 2184f48..787598e 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -47,3 +47,4 @@ - [Поиск элементов в DOM](web_apis/querying_dom_elements.md) - [Работа с текстом элемента](web_apis/working_with_element_text.md) - [Поиск элементов внутри других элементов](web_apis/querying_elements_inside_other_elements.md) + - [События](web_apis/events.md) diff --git a/src/web_apis/events.md b/src/web_apis/events.md new file mode 100644 index 0000000..e513e99 --- /dev/null +++ b/src/web_apis/events.md @@ -0,0 +1,52 @@ +# События + +Когда пользователь совершает какое-то действие на веб-странице, считается, что произошло событие. Существует множество типов событий, например `click` — пользователь нажал на элемент, `mouseover` — пользователь навёл курсор на элемент, `keydown` — пользователь нажал клавишу на клавиатуре и т.д. + +Для создания интерактивных страниц нужно, чтобы при возникновении определённого события выполнялся определённый код. Для этого у каждого элемента есть метод `addEventListener`, который позволяет зарегистрировать обработчик события. Метод в качестве аргументов принимает тип события и функцию-обработчик, которую браузер будет вызывать каждый раз, когда на данном элементе будет происходить событие данного типа. + +Например, ниже показано, как добавить кнопке обработчик события `click`, чтобы при каждом её нажатии браузер показывал диалоговое окно. + +```html + +``` + +```js +function handleButtonClick() { + alert("The button was clicked"); +} + +const button = document.querySelector("button"); +button.addEventListener("click", handleButtonClick); +``` + +Функция-обработчик может принимать параметр, в который будет передан объект с информацией о событии. Чаще всего у этого объекта используется свойство `target`, которое содержит объект элемента, на котором событие произошло. + +Это может быть полезно, когда один и тот же обработчик используется сразу на нескольких элементах. Например, ниже показана страница, на которой уже несколько кнопок, а в диалоговом окне показывается, какая именно из них была нажата. + +```html + + + +``` + +```js +function handleButtonClick(event) { + alert(event.target.innerText + " was clicked"); +} + +const buttons = document.querySelectorAll("button"); + +for (let i = 0; i < buttons.length; i++) { + buttons[i].addEventListener("click", handleButtonClick); +} +``` + +## Упражнения + +1. Реализуй страницу, на которой отображается число, изначально `0`. При каждом клике на число оно должно увеличиваться на единицу. + +1. Реализуй страницу, на которой отображаются два числа, изначально оба `0`. При каждом клике на число это число должно увеличиваться на единицу. + +1. Реализуй страницу, на которой отображается несколько символов стрелочек. Стрелочка может указывать в одном из восьми направлений: `↑`, `↗`, `→`, `↘`, `↓`, `↙`, `←` или `↖`. Изначально все стрелочки указывают вверх. При каждом клике на любую стрелочку эта стрелочка должна "поворачиваться" на 45° по часовой стрелке. + +1. Реализуй страницу с игрой в крестики-нолики. На странице отображается квадратное поле размером 3 на 3 ячейки. При клике на пустую ячейку в ней появляется либо крестик `X`, либо нолик `O`, в зависимости от того, кто из двух игроков делает ход. Игроки ходят по очереди, первым ходит игрок с крестиками.