Подія у JavaScript це сигнал від браузера що щось сталося.
Щоб виконати дію (код) на потрібну подію необхідно для події вказати функцію яка буде виконуватися коли настане подія.
Об'єкти які підтримують події містять властивість яка починається з "on" і назва події: "on<подія>" які є тотожними атрибутами HTML. Наприклад: "onload", "onclick". Даній влативості потрібно вказати (призначити) функію яка буде виконуватися.
<b onclick="fClick();">клік</b>
function fClick(){alert("клік");}
Властивість є як для читання так і для запису.
Якщо об'єкту не призначено подію то властивість дорівнює null, якщо призначена подія то повертає силку на функцію.
alert( document.onclick ); //null
document.onclick = function(){ alert("клік по документу"); }
alert( document.onclick ); // function(){ alert("клік по документу"); }
Кожній функції при виникнені події передається в якості параметру о'бєкт Event або його типу події, лише у браузерах Internet Explorer цей параметр не передається функції а необхідно брати з глобальної зміної window.event. Об'єкт Event містить додаткову інформацію про подію.
Кросбраузерний спосіб отримання об'єкта event:
function myFunction(event){
event= event || window.event;
alert(event);
}
document.onclick=myFunction;
Також є сучасний спосіб призначення події для об'єкту це метод addEventListener, а для видалення removeEventListener().
У JavaScript можна зробити імітацію події за допомогою методу dispatchEvent().
JavaScript дозволяє посилатися на об'єкт якому присвоєна подія за допомогою this:
document.onclick=function(){
alert(this);
}
| onabort | - переривання завантаження |
| onfocus | - отримання фокусу |
| onblur | - втрата фокусу, коли фокус отримує інший елемент. |
| onchange | - значення було змінено у елементі. |
| oninput | - змінено значення |
| onclick | - одинарний клік (натисканя і відпускання кнопки миші) |
| ondblclick | - подвійний клік |
| oncontextmenu | - визвано контексне меню |
| onmousedown | - натиснуто кнопку миші |
| onmousemove | - переміщення курсору миші |
| onmouseout | - відведено курсор миші |
| onmouseover | - наведено курсор миші |
| onmouseup | - відпущено кнопку миші |
| onkeydown | -натискається клавіша на клавіатурі |
| onkeypress | -натиснута клавіша на клавіатурі |
| onkeyup | -відпущена клавіша на клавіатурі |
| onload | - завершено завантаження |
| onunload | - вивантаження документа |
| onloadstart | - завантаження розпочато |
| onloadend | - завантаження завершено |
| onerror | - виникла помилка під час завантаження |
| onresize | - зміна розміру |
| onselect | - виділення тексту |
| onbeforecopy | - дані будуть копіюватася у буфер обміну |
| oncopy | - копіюються дані у буфер обміну |
| oncut | - вирізаються дані у буфер обміну |
| onbeforecut | - дані будуть вирізатися у буфер обміну |
| onpaste | - дані вставляються з буферу обміну |
| onbeforepaste | - дані будуть вставлені з буферу обміну |
| onsubmit | - надсилання даних форми |
| onreset | - очищення даних форми |
| onscroll | - прокрутка |
| ontouchstart | - дотик на сенсорі. |
| ontouchmove | - переміщення дотику. |
| ontouchend | - дотик на сенсорі завершено |
| ontouchcancel | - дотик на сенсорі перервано |
| onplay | - відтворення |
| onpause | - пауза |
| onplaying | - відтворення після зупинки |
| onratechange | - зміна швидкості відтворення. |
| onseeking | - починається переміщення прокрутки |
| onseeked | - завершується переміщення прокрутки |
| ontimeupdate | - зміна часу відтворення |
| onvolumechange | - зміна гучності у плеєрі. |
| onwaiting | - зупинено бо наступний кадр завантажується у буфер. |
| onorientationchange | - зміна орієнтації екрану |
| onbeforeprint | - сторінка буде друкатися - визвано діалогове вікно друкувати. |
| onafterprint | - сторінка друкується або закрито діалогове вікно друкувати. |
| onhashchange | - змінено хеш адреси URL. |
| onlanguagechange | - змінено мовний список. |
| onmessage | - отримано дані від іншого вікна |
| ononline | - підключено до мережі |
| onoffline | - відключено від мережі |
| onpopstate | - зміненюється запис в історії браузера. |
| ontoggle | - відкрито / закрито елемент. |
| oninvalid | - елемент не пройшов валідацію. |
Призначаємо подію click для об'єкта document:
document.onclick = function(){ alert("клік по документу"); }
document.addEventListener("click", function(){alert("клік по документу")});