Як обробляти обробку подій у JavaScript (приклади та все)

У цьому блозі я спробую пояснити основи механізму обробки подій у JavaScript, без допомоги жодної зовнішньої бібліотеки, як Jquery / React / Vue.

У цій статті я поясню наступні теми:

  1. Документ і вікно об'єктів і додавання Прослуховувач подій для них.
  2. Метод Event.preventDefault () та його використання.
  3. Метод Event.stopPropagation () з прикладом.
  4. Як видалити прослуховувач події з елемента.

Документи та віконні об'єкти за допомогою прослуховувачів подій

Об'єкт Window представляє вкладку. Якщо ви читаєте цей блог у відповідному браузері, ваша поточна вкладка представляє об'єкт Window.

Об'єкт вікна має доступ до такої інформації, як панель інструментів, висота та ширина вікна, підказки та попередження. Давайте подивимося, як ми можемо додати прослуховувач подій (mousedown) до об’єкта вікна та проаналізувати деякі його властивості.

Як додати слухача на об'єкт вікна

Метод addEventListener - найкращий спосіб додати прослуховувач подій у вікно , документ або будь-який інший елемент у DOM.

Існує ще один спосіб, що називається властивістю "on" onclick, onmouseover тощо. Але це не настільки корисно, оскільки не дозволяє додавати кілька прослуховувачів подій до одного елемента. Інші методи це дозволяють.

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

Відкрийте інструменти розробника (Перевірити елемент) на цій сторінці та скопіюйте вставте наступний код на панель консолі та натисніть Enter.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

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

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

Подробиці події, пов’язаної з мишоудаун

У наступних кількох рядках я розтлумачу деякі важливі захоплені властивості, що відповідають події мишоудаун, яку ми щойно провели.

button : Оскільки це була подія мишків, вона повідомить вам, яку кнопку ви натиснули. Для миші лівий, середній та правий відповідають 0, 1 та 2 відповідно. Якщо натиснути праву кнопку, ви побачите значення 2.

clientX і clientY : Розташування відносно верхнього лівого кута області вмісту (Viewport). Просто проаналізуйте значення цих властивостей за місцем, яке ви натиснули, і ви побачите, як вони пов’язані. Навіть якщо ви прокручуєте сторінку вниз, ці властивості залишаються незмінними. Посилання на ScreenX та ScreenY у верхньому лівому куті екрана (монітор).

altkey / ctrlkey : Якщо ви натискаєте будь-яку з цих клавіш, виконуючи операцію правої клавіші миші, ви бачите, що ці значення відповідають дійсності. В іншому випадку вони помилкові, як у нашому випадку.

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

Що таке об’єкт документа ?

Документ складається з того, що знаходиться всередині внутрішнього вікна. Документ об'єкт є коренем кожного вузла в DOM. Якщо ви завантажуєте сторінку HTML у браузері, тоді документ представляє всю цю сторінку.

Метод Event.preventDefault () та його використання

Іноді ми не хочемо, щоб елемент HTML поводився так, як це передбачається за замовчуванням. У такому випадку ми можемо скористатися цим методом.

Приклад : Клацання елемента прив'язки змусить браузер перенаправити на цю сторінку за замовчуванням. Спробуємо цього уникнути.

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Ви можете створити файл HTML і перевірити цей код.

Event.stopPropagation () метод

Події течуть назовні. Є певні випадки, наприклад, коли у вас є вкладені елементи, і ви виконуєте певну подію з дитиною, і це закінчується виконанням певних дій над батьком, яких ви хочете уникнути. У таких випадках цей метод є корисним.

Це звучить трохи заплутано, але, сподіваюся, наведений нижче приклад це зрозуміє.

Уявіть, що у вас є кнопка всередині абзацу, і ви прикріпили до них обох подію, пов’язану з мишею. Ви хочете досягти таких випадків використання:

  1. Якщо натиснути кнопку правою кнопкою миші, тоді вона повинна показати, що на неї клацнули і не поширюється на батьківський елемент (тобто абзац).
  2. Якщо ви клацніть лівою кнопкою миші на кнопці, тоді вона повинна розповсюджуватися нормально і запускати прослуховувач подій абзацу.

Рішення:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Видалення в слухача подій з елемента

Для того, щоб видалити прослуховувач події з елемента, нам потрібно викликати метод removeEventListener з ім'ям події та ім'ям функції.

Примітка : коли передаються анонімні функції, вони не мають відображення пам'яті. Отже, нам потрібно визначити ці функції поза зворотним викликом, а потім посилатися на них тут, у зворотному виклику removeEventListener.

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

Якщо ви дійшли до цієї точки, ви повинні гідно розуміти, як працюють прослуховувачі подій у JavaScript.

Якщо під час роботи з улюбленою бібліотекою / фреймворками ви коли-небудь застрягли в частині обробки подій, то ці основи повинні допомогти вам вирішити проблему.