3 корисні техніки для використання прослуховувачів подій у JavaScript (EventListener)

Vanilla JavaScript — Прослуховувачі подій (Event Listeners)

1. Перевірка, чи активна клавіша Caps Lock.

Метод KeyboardEvent.getModifierState() у JavaScript дозволяє визначити стан модифікаторної клавіші, такої як Caps Lock. Нижче приклад, як можна перевірити, чи включена Caps Lock:

document.addEventListener("keydown", (event) => {  
 if (event.getModifierState("CapsLock")) {  
 console.log("Caps Lock увімкнено!");  
 }  
});

У цьому прикладі ми додаємо прослуховувач подій (Event Listener) keydown до документа і всередині перевіряємо, чи включена Caps Lock, за допомогою методу event.getModifierState("CapsLock"). Якщо метод повертає true, значить, Caps Lock увімкнено, і ми можемо вивести повідомлення в консоль.

Зверніть увагу, що getModifierState() приймає один аргумент, який є назвою модифікаторної клавіші, яку ви хочете перевірити. Метод повертає булеве значення, що вказує, чи натиснута ця клавіша.

Ви також можете перевірити інші модифікаторні клавіші, такі як “Shift”, “Control”, “Alt” чи “Meta”.

2. Одноразове виконання прослуховувача подій (Event Listener).

У JavaScript можна використовувати опцію once при додаванні прослуховувача подій, щоб цей прослуховувач спрацював лише один раз. Ось приклад:

const button = document.querySelector('button');  

button.addEventListener('click', handleClick, { once: true });  
function handleClick() {  
 console.log('Кнопка була натиснута.');  
}

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

Також можна видалити прослуховувач подій вручну, використовуючи removeEventListener(), після першого спрацювання.

const button = document.querySelector('button');  

button.addEventListener('click', handleClick);  
function handleClick() {  
 console.log('Кнопка була натиснута.');  
 button.removeEventListener('click', handleClick);  
}

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

3. Отримання координат курсора при його переміщенні.

Ось приклад, як за допомогою події mousemove можна відслідковувати положення миші в JavaScript:

document.addEventListener("mousemove", function(event) {  
 console.log("Курсор X: " + event.clientX);  
 console.log("Курсор Y: " + event.clientY);  
});

У цьому прикладі ми використовуємо метод addEventListener, щоб прикріпити прослуховувач подій (Event Listener) mousemove до документа. Анонімна функція, передана як другий аргумент, викликається під час кожного переміщення миші. Всередині функції ми використовуємо метод console.log, щоб вивести значення clientX і clientY об'єкта event, які представляють положення миші відносно вікна браузера.

Висновок

Важливо пам’ятати, що багато фронтенд-фреймворків побудовані на JavaScript. Розуміючи основи мови, ви зможете максимально ефективно використовувати ці фреймворки. Використання прослуховувачів подій (Event Listeners), як у наведених прикладах, допоможе залишатися обізнаним у JavaScript, навіть коли з'являються нові технології. Розуміння основ завжди корисне для вашого процесу розробки.

Якщо вам сподобався цей матеріал, перегляньте мої інші статті, поставте "клас" і підпишіться, щоб дізнатися більше про різноманітні теми, пов’язані з технологіями. Дякую 🙂

примітки:

Як виявити, чи увімкнена клавіша caps lock в javascript?

У JavaScript, для виявлення, чи увімкнена клавіша Caps Lock, можна використовувати подію keydown та властивість getModifierState. Подія keydown спрацьовує при натисканні клавіші, тому можна використовувати її для виявлення натискання клавіші Caps Lock. Властивість getModifierState дозволяє перевірити, чи увімкнена клавіша Caps Lock. Ось приклад використання події keydown та властивості getModifierState для виявлення увімкненої клавіші Caps Lock в JavaScript:

window.addEventListener('keydown', function(event) {
  if (event.getModifierState('CapsLock')) {
    console.log('Caps Lock is on');
  } else {
    console.log('Caps Lock is off');
  }
});

У цьому прикладі, ми використовуємо подію keydown для виявлення натискання клавіші та властивість getModifierState для перевірки, чи увімкнена клавіша Caps Lock.