Навіщо нам потрібні евент взагалі? Коли ми хочемо виконати якийсь код при кліці на елемент, або при наведенні миші, або при фокусі, то нам потрібні евент. Тобто ми вішаємо евент на DOM елемент і він там висить. І чекає, коли ж ми зробимо такий евент. Наприклад коли ми кликнемо по елементів. І тоді він виконує цю функцію.
Вішати евент за допомогою html, це неправильно і не гнучко. Набагато краще для цього використовувати спеціальний метод. Це метод addEventListener.
Давайте приберемо атрибут onclick з нашої кнопки, і додамо їй клас change
Але зараз ми зіткнемося з одним нюансом. Давайте спробуємо в нашому файлі знайти кнопку і законсоліть її
Тепер якщо ми подивимося в браузер, то наш елемент вивівся і ми можемо з ним працювати. Давайте повісимо listener кліка на нашу кнопку.
Давайте запишемо наш DOM елемент в змінну і додамо addEventListener. Це функція, яка першим параметром приймає назву евент, в нашому випадку клік, а другим параметром функцію, яка виконається, коли ми кликнемо.
Якщо ми подивимося в браузер, то при кліці у нас вивів наш console.log.
І таким чином можна навішувати скільки завгодно оброблювачів. Наприме давайте додамо ще один listener.
Давайте тепер напишемо невеликий приклад. Ми хочемо створити 2 елемента і при наведенні на перший, ми хочемо показувати другий елемент.
Давайте додамо 2 елемента на сторінку і додамо їм класи. Другий елемент приховуємо написавши inline display: none. Звичайно, краще було б написав стилі в окремому css файлі, але для маленького прикладу можна і так.
І навіс на перший елемент 2 події: mouseover і mouseout. Тобто перше відбуватиметься при наведенні на елемент, а друге коли курсор йде з елемента.
Якщо ми подивимося в браузер, то при наведенні і виведенні курсора виводиться console.log.
Давайте тепер при наведенні додамо другого елементів display: block, а при відведені курсора display: none
Якщо ми подивимося в браузер, то при наведенні на перший елемент у нас показується другий елемент, а при відведені курсора ховається.