New chapter: Events

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)

src/web_apis/events.md

@@ -0,0 +1,52 @@
+# События
+
+Когда пользователь совершает какое-то действие на веб-странице, считается, что произошло событие. Существует множество типов событий, например `click` — пользователь нажал на элемент, `mouseover` — пользователь навёл курсор на элемент, `keydown` — пользователь нажал клавишу на клавиатуре и т.д.
+
+Для создания интерактивных страниц нужно, чтобы при возникновении определённого события выполнялся определённый код. Для этого у каждого элемента есть метод `addEventListener`, который позволяет зарегистрировать обработчик события. Метод в качестве аргументов принимает тип события и функцию-обработчик, которую браузер будет вызывать каждый раз, когда на данном элементе будет происходить событие данного типа.
+
+Например, ниже показано, как добавить кнопке обработчик события `click`, чтобы при каждом её нажатии браузер показывал диалоговое окно.
+
+```html
+<button>Click me</button>
+```
+
+```js
+function handleButtonClick() {
+    alert("The button was clicked");
+}
+
+const button = document.querySelector("button");
+button.addEventListener("click", handleButtonClick);
+```
+
+Функция-обработчик может принимать параметр, в который будет передан объект с информацией о событии. Чаще всего у этого объекта используется свойство `target`, которое содержит объект элемента, на котором событие произошло.
+
+Это может быть полезно, когда один и тот же обработчик используется сразу на нескольких элементах. Например, ниже показана страница, на которой уже несколько кнопок, а в диалоговом окне показывается, какая именно из них была нажата.
+
+```html
+<button>Button 1</button>
+<button>Button 2</button>
+<button>Button 3</button>
+```
+
+```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`, в зависимости от того, кто из двух игроков делает ход. Игроки ходят по очереди, первым ходит игрок с крестиками.