Події

В js є підтримка більше сотні подій.

Подія - реакція браузера на зовнішні зміни: рух мишкою, клік, скролл, кінець завантаження сторінки, ресурса, об’єкта, натискання кнопок клавіатури і т.п.

Події в JS починаються з літер on..., після яких йде назва події.

Кожна подія - це метод елемента, який бере участь у цій події.

Події частіше всього наслідуються батьківськими елементами. Так, клік по кнопці викличе також подію кліка по всім батьківським елементам кнопки, по body.

Подія реалізується функцією: що потрібно зробити коли відбулась дана подія. Функція може приймати єдиний аргумент (як приавило йому дають ім'я e, event), це об'єкт, в який буде збережено всю інформацію про подію.

Клік

Подія кліка використовується найчастіше.

Давайте дослідимо об'єкт event, що передається всередину функції:


				button.onclick = function(e){

				  console.dir(e);

				};

span strong link i em q

== Result for click ==


				<p>

				  <span class="js-click">span</span>

				  <strong class="js-click">strong</strong>

				  <a href="http://google.com" class="js-click">link</a>

				  <i class="js-click">i</i>

				  <em class="js-click">em</em>

				  <q class="js-click">q</q>

				</p>

				<div id="clickResult">== Result for click ==</div><br><br>

				<div id="clickXYbox" style="width: 200px; height: 100px; background: silver; border: 1px solid grey;"></div>


				document.querySelectorAll('.js-click').forEach(function(e){

				  e.onclick = function(event){

				    clickResult.innerHTML = this.tagName;

				    return false;

				  }

				});

				function clickXY(e){ e.target.innerHTML = 'Click: ' + e.clientX + ' - ' + e.clientY + '<br>OffsetTop: ' + e.target.offsetTop; }

				clickXYbox.onclick = clickXY;

Щоб заборонити перехід по посиланню - можна зробити щоб функція повертала false:


				a.onclick = function(){

				  ...

				  return false;

				};

Або в будь-якому місці функції викликати метод події .preventDefault():


				a.onclick = function(e){

				  e.preventDefault();

				  ...

				};

Краще використовувати метод: Отличие preventDefault, stopPropagation и stopImmediatePropagation.

Отримання та втрата фокуса

Робота з фокусом зводиться до використання двох подій: .onfocus та .onblur:

Focus:


				<input type="text" class="js-focus">


				let focus = document.querySelector('.js-focus');

				focus.onfocus = function(){ this.style.background = 'yellow'; };

				focus.onblur = function(){ this.style.background = 'white'; };

				window.onfocus = function(){ document.title = 'Welcome!'; };

				window.onblur = function(){  document.title = 'Good bye'; };

Події курсора миші

При роботі з мишою є декілька подій:


				.onmousemove - рух курсора миші

				.onmouseenter - курсор зайшов на елемент

				.onmouseleave - курсор вийшов за межі елемента

				.onmouseover - курсор над елементом

				.onmouseout - курсор не над елементом

				.onmousedown - нажата кнопка миші

				.onmouseup - відпущена кнопка миші

Ще є декілька подій .ondrag*, які ми розглянемо пізніше, при роботі з drag-n-drop.

Зверніть увагу на різницю clientY та layerY (якщо у вас сторінка прокручена).

0
Mouse enter:
Mouse leave:
Mouse down:
Mouse up:
5


				<div id="MouseMove" style="background: silver; border: 1px solid grey;">

				  <span>0</span><br>

				  <span>1</span><br>

				  <span>2</span><br>

				  <span>3</span><br>

				  <span>4</span><br>

				</div>


				let MouseMove = document.querySelector('#MouseMove');

				let span = MouseMove.querySelectorAll('span');

				MouseMove.onmousemove = function(event) {

				  span[0].innerHTML = event.layerX + ' - ' + event.layerY;

				};

				MouseMove.onmouseenter = function() {

				  span[1].innerHTML += '♡';

				};

				MouseMove.onmouseleave = function() {

				  span[2].innerHTML += '♡';

				};

				MouseMove.onmousedown = function() {

				  span[3].innerHTML += '♡';

				};

				MouseMove.onmouseup = function() {

				  span[4].innerHTML += '♡';

				};

Є ще дві події, які контролюють зміну елемента під курсором миші: onmouseover та onmouseout. Вони спрацьовують тоді, коли курсор потрапляє на дочірні елементи.

Протестуйте у пісочниці:


				<div><div></div></div>

				div { padding: 40px; border: 1px solid #000;}


				let div = document.querySelector('div');    // нам потрібен лише зовнішній div

				div.onmouseenter = function(e){ console.log(e.type); }

				div.onmouseleave = function(e){ console.log(e.type); }

Понаводьте курсор на прямокутники та подивіться результат в консолі. Простежте коли саме виникають події.

Змініть ці дві події на onmouseover та onmouseout і повторно простежте коли саме виникають події.

Завдання

Модифікуйте скрипт так, щоб він показував координати відносно блока, а не всієї сторінки.
Виводьте також інформацію про натиснуту кнопку миші - праву, ліву, середню.
Виводьте в консоль координати точки клієнтської області екрану в момент відпускання кнопки миші.

Програмний виклик події.

Для програмного виклику події просто викличте метод:


				button.onclick();

Видалити подію можна присвоївши значення null у метод:


				button.onclick = null;

Після цього прописана раніше реакція на цю подію перестане виконуватися.

Інші події

Ще є події роботи з клавіатурою, із завантаженням документа чи ресурса, прокруткою, зміною розмірів, роботою з тачскріном, поворотом екрану і т.д.

Деякі з цих подій ми будемо використовувати на практиці, з деякими - ви самі познайомитеся, коли прийде час.