logo

Події JavaScript

Зміна стану об'єкта відома як an Подія . У html існують різні події, які вказують на те, що користувач або браузер виконує певну дію. Коли javascript код включено в HTML, js реагує на ці події та дозволяє виконання. Цей процес реагування на події називається Обробка подій . Таким чином, js обробляє події HTML через Обробники подій .

Наприклад , коли користувач клацає на веб-переглядачі, додайте код js, який виконає завдання, яке буде виконано під час події.

Ось деякі з подій HTML та їхніх обробників:

Події миші:

Захід проведено Обробник подій опис
натисніть onclick При клацанні мишкою на елементі
наведення курсора onmouseover Коли курсор миші наводиться на елемент
mouseout onmouseout Коли курсор миші залишає елемент
mousedown onmousedown Коли кнопка миші натиснута на елемент
mouseup onmouseup Коли кнопку миші відпущено над елементом
переміщення миші onmousemove Коли відбувається рух миші.

Події клавіатури:

Захід проведено Обробник подій опис
Keydown & Keyup onkeydown & onkeyup Коли користувач натискає, а потім відпускає клавішу

Події форми:

Захід проведено Обробник подій опис
фокус у фокусі Коли користувач фокусується на елементі
подати onsubmit Коли користувач надсилає форму
розмиття onblur Коли фокус віддалений від елемента форми
змінити onchange Коли користувач модифікує або змінює значення елемента форми

Події вікна/документа

Захід проведено Обробник подій опис
навантаження onload Коли браузер завершить завантаження сторінки
розвантажити onunload Коли відвідувач залишає поточну веб-сторінку, браузер вивантажує її
змінити розмір зміна розміру Коли відвідувач змінює розмір вікна браузера

Давайте обговоримо кілька прикладів подій та їх обробників.

Натисніть Подія

 Javascript Events 
Перевірте зараз

Подія MouseOver

 <p onmouseover="mouseoverevent()"> Keep cursor over me</p> 
Перевірте зараз

Фокусна подія

 Javascript Events <h2> Enter something here</h2> 
Перевірте зараз

Подія Keydown

 Javascript Events <h2> Enter something here</h2> 
Перевірте зараз

Завантажити подію

 Javascript Events <br> 
Перевірте зараз