JS об'єкт Mouse

Загальний опис

Mouse Events – це набір подій JavaScript, пов'язаних із взаємодією користувача з мишею. До них належать події натискання, наведення, переміщення миші та інші дії. Основні події миші: click (клік), dblclick (подвійний клік), mousedown (натискання кнопки миші), mouseup (відпускання кнопки миші), mousemove (переміщення курсора), mouseover (наведення на елемент), mouseout (вихід курсора за межі елемента) тощо.

Щоб працювати з подіями миші, зазвичай використовують метод addEventListener, який дозволяє додати обробник до конкретної події на елементі. Наприклад:

document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('Елемент було клікнуто!');
});

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

Для Mouse Events часто використовують об'єкт event, що передається до обробника події. Він містить корисну інформацію про подію, зокрема координати курсора миші (event.clientX та event.clientY), яка кнопка миші була натиснута (event.button), та інші деталі.

Ще один корисний приклад – mousemove, який активується щоразу, коли користувач переміщує мишу. Це часто використовується для створення інтерактивних ефектів:

document.addEventListener('mousemove', function(event) {
  console.log('Курсор на позиції:', event.clientX, event.clientY);
});

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

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

Синтаксис

element.addEventListener('eventName', function(event) {
  // код обробника події
});

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

document.addEventListener('mousedown', function(event) {
  const startX = event.clientX;
  const startY = event.clientY;
  function onMouseMove(event) {
    const width = event.clientX - startX;
    const height = event.clientY - startY;
    console.log('Розмір виділення:', width, height);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});

const element = document.getElementById('draggable');
element.addEventListener('mousedown', function(event) {
  const startX = event.clientX - element.offsetLeft;
  const startY = event.clientY - element.offsetTop;
  function onMouseMove(event) {
    element.style.left = `${event.clientX - startX}px`;
    element.style.top = `${event.clientY - startY}px`;
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});

Методи

initMouseEvent()

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

getModifierState()

Перевіряє стан клавіш-модифікаторів (таких як `Alt`, `Shift`, `Control`, `Meta`) під час події миші. Повертає `true`, якщо зазначена клавіша активна, інакше `false`.

Властивості

movementX

Вказує на зміну позиції курсора по осі `X` з моменту попередньої події.

movementY

Вказує на зміну позиції курсора по осі `Y` з моменту попередньої події.

offsetX

Відстань курсора по осі `X` відносно елемента, на якому виникла подія.

offsetY

Відстань курсора по осі `Y` відносно елемента, на якому виникла подія.

pageX

Позиція курсора по осі `X` відносно всього документа, враховуючи прокрутку.

pageY

Позиція курсора по осі `Y` відносно всього документа, враховуючи прокрутку.

relatedTarget

Елемент, пов'язаний з подією миші, наприклад, елемент, з якого курсор був наведений чи видалений.

altKey

Повертає `true`, якщо під час події миші була натиснута клавіша `Alt`, інакше `false`.

button

Вказує на натиснуту кнопку миші під час події (0 – ліва, 1 – середня, 2 – права).

buttons

Повертає число, яке представляє всі активні кнопки миші під час події (ліві, праві, середні або комбінації).

clientX

Позиція курсора по осі `X` відносно області перегляду браузера.

clientY

Позиція курсора по осі `Y` відносно області перегляду браузера.

ctrlKey

Повертає `true`, якщо під час події була натиснута клавіша `Control`.

layerX

Відстань курсора по осі `X` відносно батьківського контейнера, якщо є.

layerY

Відстань курсора по осі `Y` відносно батьківського контейнера, якщо є.

metaKey

Повертає `true`, якщо під час події була натиснута клавіша `Meta` (Command на Mac).

screenX

Позиція курсора по осі `X` відносно екрана пристрою.

screenY

Позиція курсора по осі `Y` відносно екрана пристрою.

shiftKey

Повертає `true`, якщо під час події була натиснута клавіша `Shift`.

mozInputSource

Унікальна властивість для Firefox, яка вказує на джерело події (наприклад, миша або стилус).

webkitForce

Унікальна властивість для Safari, що повертає силу натискання при взаємодії з сенсорним екраном (підтримується лише в Safari).

x

Позиція курсора по осі `X`, аналогічна до `clientX`, але доступна як альтернатива для сумісності.

y

Позиція курсора по осі `Y`, аналогічна до `clientY`, але доступна як альтернатива для сумісності.