Javascript - об’єкт event, ит шеф

На цьому уроці ми розглянемо для чого призначений об'єкт event і як його отримати. А також познайомимося з властивостями і методами цього об'єкта.

Для чого призначений об'єкт event. і як його отримати

Об'єкт event призначений для отримання різної інформації про подію в обробнику події. Тобто дозволяє отримати елемент, який викликав обробник події; елемент, який згенерував подія; визначити яка була натиснута кнопка миші (для подій пов'язаних з мишею) і багато іншого.

Об'єкт event відповідно до стандарту завжди передається обробнику події через перший параметр.

Властивості і методи об'єкта event

У цьому розділі ми розглянемо властивості і методи об'єкта event.

Загальні властивості об'єкта event:

type - рядок, що містить ім'я події.
target - DOM-елемент, який згенерував подія.
currentTarget - DOM-елемент, який викликав обробник події.
eventPhase - число, що показує на якому етапі відбулася подія (1 - етапі занурення (перехоплення), 2 - на цілі, 3 - на етапі спливання).
timestamp - число (дата), коли відбулася подія
bubbles - повертає логічне значення, яке вказує чи може дана подія спливати
defaultPrevented - перевіряє чи можна викликати метод preventDefault () для даної події.
view - повертає посилання на об'єкт window, в якому відбулася подія.

Методи об'єкта event:

preventDefault () - скасувати стандартне дію браузера, якщо це звичайно можливо.
stopPropagation () - запобігти спливання події (бульбашки)

Властивості об'єкта event. призначені для отримання додаткової інформації про події, пов'язані з клавіатурою і мишкою.

which (для миші) - повертає число, яке вказує, яка кнопка миші була натиснута (1 - ліва кнопка, 2 - середня кнопка, 3 - права кнопка). Це властивість в основному використовується разом з подією mousedown. Дана властивість може використовуватися для отримання додаткової інформації про подію, пов'язаному з натисканням кнопки миші.
button (для миші) - повертає число, яке вказує, яка кнопка миші була натиснута. Дана властивість може використовуватися для отримання додаткової інформації про подію, пов'язаному з натисканням кнопки миші.
clientX. clientY (для миші) - повертають інформацію про становище курсору (clientX - горизонтальна координата, clientY - вертикальна координата) щодо лівого верхнього кута клієнтської області.
screenX. screenY (для миші) - повертають інформацію про становище курсору (screenX - горизонтальна координата, screenY - вертикальна координата) щодо лівого верхнього кута екрану.
detail (для миші) - повертає число, яке вказує скільки разів була натиснута кнопка миші в деякій області за короткий проміжок часу.
altKey. ctrlKey. metaKey. shiftKey (для миші і клавіатури) - щоб отримати додаткову інформацію про те чи була натиснута відповідна клавіша alt. ctrl. meta і shift в той момент коли відбулася подія.
relatedTarget (для миші) - повертає елемент, який пов'язаний з елементом, згенерованого події миші.
Наприклад, властивість relatedTarget (для миші) може бути використано для отримання додаткової інформації про події mouseover або mouseout.
Для події mouseover. властивість target - вказує на елемент, який зараз знаходиться під курсором; а властивість relatedTarget - на елемент з якого курсор прийшов.
Для події mouseout. властивість target - вказує на елемент з якого курсор прийшов; а relatedTarget (для миші) - на елемент, який зараз знаходиться під курсором.
charCode (для клавіатури) - повертає код символу Unicode натиснутоюклавіші (для події keypress). Якщо ця властивість використовувати для отримання додаткової інформації про події keydown або keyup. то воно завжди поверне "0".
keyCode. which (для клавіатури) - повертає код символу Unicode (для події keypress) або код ключа Unicode (для подій keydown і keyup).
location (для клавіатури) - повертає число, яке вказує на область клавіатури або пристрою в якому розташована натиснута кнопка (0 - основна область клавіатури, 1 - область, в якій розташована ліва клавіша CTRL або ліва клавіша ALT. 2 - область, в якій розташована права клавіша CTRL або права клавіша ALT. 3 - область цифрової панелі, яка дублює клавіші основний області для введення цифр і арифметичних операторів).

Наприклад, при переміщенні миші (подія mousemove) по веб-сторінці, вивести координати курсора в елемент, який має id = "myP".

Якщо курсор знаходиться над декількома елементами одночасно, то його отримує елемент, який розташований в DOM найглибше. Курсор може бути тільки над одним елементів - найглибшим в DOM (і верхнім по z-index).

Добрий час доби.
Є кілька кнопок з одним класом (кілька копій однієї кнопки), що запускають, наприклад, форму у вікні.
Як «цивілізовано» (на jQuery) відстежувати кнопу по якій кликнули, щоб «зробити щось різне», в залежності від того, по якій кнопці кликнули? Прописувати if? Або можна реалізувати через event?
Дякуємо.

Наприклад, якщо Ви хочете подивитися всю інформацію об'єкта event про подію, що відбулася, то можна написати наступний код: