У JavaScript багато об'єктів (window, document, Element і т.п.) які підтримують події.
Подія у JavaScript це сигнал від браузера що щось відбулося - завантажився документ, клік миші, відправка форми і т.п..
Найпростіший спосіб додати подію це присвоїти властивості on[подія] функцію.
Приклад події onclick:
<div>Зробіть <button id="testBt">click!</button></div>
testBt.onclick=function(){ alert('Дякую за клік :-)'); };
- Спосіб використання властивості on[подія] має наступні недоліки:
- можна задати лише одну функцію на подію
- якщо задати нову функцію то стара (що була задана) заміниться
Тому для додавання події часто використовується метод addEventListener().
- Переваги addEventListener:
- можна додати декілька функцій на подію
- додаткові параметри події
<div>Зробіть <button id="testBt2">click!</button></div>
testBt2.addEventListener('click', function(){
alert('Дякую за клік :-)');
});
Приклад додавання двох функцій до події:
<div>Зробіть <button id="testBt3">click!</button></div>
testBt3.addEventListener('click', function(){
alert('Дякую за клік :-)');
});
testBt3.addEventListener('click', function(){
this.style.color='red';
});
Дві функції будуть виконуватися при виконані події не мішаючи одна одній.
При виконані події у функцію перелається параметр: об'єкт Event який містить інформацію про подію.
Об'єкт Event є батьківський для багатьох об'єктів: PointerEvent, KeyboardEvent, ClipboardEvent, FocusEvent і т.п..
<div>Зробіть <button id="testBt4">click!</button></div>
testBt4.addEventListener('click', function(event){
console.log(event);
});
- Розглянемо використання деяких властивостей об'єкта Event:
- target - елемент над яким виникла подія.
<div><button name="buttons">click1</button> <button name="buttons">click 2</button> <button name="buttons">click 3</button></div>var buttons=document.getElementsByName('buttons'); var fClick=function(e){ alert('клікнули по: '+e.target.textContent); }; for(let i=0;i<buttons.length;i++)buttons[i].addEventListener('click', fClick); - key - символ нажатої клавіши.
Введіть текст click!
<div>Введіть текст <input id="testText">click!</button></div>testText.addEventListener('keydown', function(event){ console.log(event.key); }); - button - яка кнопка миші була натиснута (0 — ліва, 1 — середня, 2 — права)
Зробіть
<div>Зробіть <button id="testBt5">click!</button></div>testBt5.addEventListener('mousedown', function(event){ alert(event.button); },false); - clientX і event.clientY - координати курсора
#move
<div id="testMove">#move</div>testMove.addEventListener('mousemove', function(event){ this.innerHTML='#move<br><b>clientX</b>='+event.clientX+' <b>clientY</b>='+event.clientY; });
Для скасування стандартної дії браузера пов’язану з цією подією використовується preventDefault().
<div><a id="testA" href="/HTML">клік по силці</a></div>
testA.addEventListener('click', function(event){
event.preventDefault();
console.log('скасували подію click');
});
Щоб видалити додану функцію з події використовується removeEventListener().
<div>Зробіть <button id="testBt6">click!</button></div>
var hFun1=function(){
alert('клік function 1');
};
var hFun2=function(){
alert('function 2');
};
testBt6.addEventListener('click', hFun1);
testBt6.addEventListener('click', hFun2);
//видаляємо подію
testBt6.removeEventListener('click', hFun1);
Зверніть увагу що видалити можна функцію з події на яку є присвоєння змінній. Анонімну функцію яка була додана у addEventListener() видалити не можливо.