Застосування об’єкта події «e» в javascript в прикладах
З об'єкта можна отримати інформацію про те, на якому елементі було скоєно дію, координати курсору в цей момент, тип події, натиснуті клавіші і інше. Щоб отримати до нього доступ досить прив'язати його до змінної. Зробити це просто - задаємо першим параметром в функції-обробнику будь-яку змінну (прийнято e).
Властивості об'єкта події:
- «Type» - повертає тип події, що сталася, наприклад при кліці миші «click»;
- «ClientX» і «clientY» - координати кусора при виникненні події;
- «Which» - містить інформацію про натиснутих клавішах;
- «Target» - тригер, що дозволяє отримати доступ до елементу, над яким відбулася подія.
Мінлива «e» як спосіб отримання елемента на якому відбулася подія
Розглянемо приклад в якому повісили обробник на синій блок. Спробуйте натиснути на нього, а потім на червоний і зелений блок. Таким чином зрозумієте різницю.
За допомогою тригера «e.target» ми отримуємо доступ до елементу на якому відбулася подія. Чи можемо отримувати будь-які атрибути (getAttribute ()) або дізнатися ім'я тега (tagName).
Якийсь б подія не відбулося, воно обов'язково достінгнет верхнього батька (виняток описано нижче), яким є «document». Виходить, що якщо повісити на «document» обробник натискання миші, то можна відловлювати в ньому клік на якому б елементі він не відбувся, а за допомогою «e.target» визначати конкретний елемент за яким скликали.
Одна рядок коду і задача вирішена. Уявіть як це складно зробити іншими способами.
Заборона на стандартне дію браузера і спливання події
Заборона на спливання події
У попередніх прикладах ми засновували рішення на ефекті спливання події, але в деяких випадках воно може не дійти до «document». Відбутися це може якщо на його шляху постане обробник з забороною подальшого спливання.
Якщо створити посилання з ідентифікатором «link» і обробником, де є заборона на спливання, то при кліці на неї буде здійснено перехід на нову сторінку незалежно від того, чи заборонений він у обробниках у батьків цього посилання.