Події mouseover і mouseout відбуваються, коли мишачий курсор переміщається на елемент або відповідно йде за його межі. Оброблювачі подій мають імена намасізавершують і навиріб відповідно. У прикладі 1 змінюватимемо властивість src залежно від того, яка настає подія mouseover або mouseout.
У цьому прикладі при наведенні курсору миші на малюнок, на його місці з'являється інший малюнок.
Для обробки подій створено дві анонімні функції. При наведенні курсору на картинку (виникає подія MouseOver) викликається перша функція і зображення змінюється значення властивості src на flower.jpg. При введенні курсору за картинку (виникає подія onMouseOut) викликається друга функція і значення цієї властивості відновлюється на bigdaisy.jpg.
У цьому прикладі при наведенні курсору миші на кнопку, у текстовому полі форми з'являється підказка про призначення цієї кнопки. Під час введення курсору в бік підказка зникає.
У скрипті створено масив mess, що містить усі варіанти підказок.
Для обробки подій створено дві анонімні функції. Перша функція виводить значення елемента масиву з цим індексом у полі info форми.
При наведенні курсору на будь-яку з кнопок (виникає подія onMouseOver). По цій події викликається функція, яка виводить у поле відповідний елемент масиву mess. При виведенні курсору з кнопки (виникає подія onMouseOut) виводиться порожній рядок.
По полю бігає мишка. Користувач ловить її комп'ютерною мишкою. Якщо спіймав, картинка з мишкою змінюється на кота, поле на траву.Розміри кота збілбшуються.
1 . Щоб отримати таку сторінку, виконаємо наступну розмітку:
Додайте таблицю стилів прямо в заголовну частину сторінки.
Пишемо скрипт на JavaScript.
Цей код розміщуємо після розмітки в тіло сторінки.
img.src="cat.gif"; — замінює зображення під час кліку.
img.classList.add('catsize'); — додає клас, який збільшує розмір зображення.
removeEventListener видаляє обробники подій, щоб кліки або рухи миші не відбувалися повторно.
Ми розглянули лише дві події (mouseover і mouseout), які спрацьовують при наведенні курсору на щось і його відведенні. На ділі ж виявляється, що є ще дві події, які роблять те саме, - mouseenter і mouseleave.
Унікальність цих подій визначається. однією важливою деталлю, саме тим, що вони не спливають.
Це важливо, тільки якщо цікавий для вас елемент має нащадків. Усе ці чотири події поводяться однаково, якщо в процесі не присутні нащадки.
Якщо такі присутні, тоді:
У 90% випадків вам цілком підійдуть mouseover і mouseout. В інших випадках, які часто пов'язані з складнішими сценаріями UI, вас порадує, що існують такі події, як mouseenter та mouseleave.
Однією з найбільш балакучих подій, з якими вам належить працювати, є подія mousemove. Воно спрацьовує величезну кількість разів під час руху курсору по елементу, в якому ви прослуховуєте подію mousemove.
Приклад використання mousemove в коді:
let button = document.querySelector("#myButton");.
button.addEventListener("mousemove", mouseIsMoving, false);.
function mouseIsMoving(e) {.
consule.log("Mouse is on the run!");.
}.
Ваш браузер контролює частоту, з якою спрацьовує подію mousemove, при цьому вона спрацьовує, коли курсор миші зміщується навіть лише на один піксель. Ця подія добре для багатьох інтерактивних сценаріїв, в яких, наприклад, важливо відстежувати поточну позицію курсору.
Drag&Drop – чудовий спосіб покращити інтерфейс. Захоплення елемента мишкою та його перенесення візуально спростять будь-що: від копіювання та переміщення документів (як у файлових менеджерах) до оформлення замовлення («покласти в кошик»).
У сучасному стандарті HTML5 є розділ про Drag and Drop – і там є спеціальні події саме для Drag&Drop переносу, такі як dragstart, dragend тощо.
Вони цікаві тим, що дозволяють легко вирішувати найпростіші завдання. Наприклад, можна перетягнути файл до браузера, так що JS отримає доступ до його вмісту.
Але вони мають і обмеження. Наприклад, не можна організувати перенесення «тільки горизонталлю» чи «тільки вертикаллю». Також не можна обмежити перенесення всередині заданої зони. Є й інші інтерфейсні завдання, які такими вбудованими подіями не реалізуються. Крім того, мобільні пристрої погано підтримують їх.
Тут ми розглядатимемо Drag&Drop за допомогою подій миші.
Якщо використовувати лише події миші без вбудованого Drag and Drop API, потрібна ручна обробка перетягування елементів. Це може бути корисним для створення більш гнучких рішень. Базовий алгоритм Drag&Drop виглядає так:
Це і є основою Drag&Drop.
У наступному прикладі ці кроки реалізовані для перенесення сонечка:
Коли людина натискає на сонечка (mousedown) – запам'ятаємо відстань від курсору до лівого верхнього кута жука у змінних shiftX/shiftY. Далі будемо утримувати цю відстань під час перетягування.
Щоб отримати це зрушення, ми можемо відняти координати:
// onmousedown
let shiftX = event.clientX - zyk.getBoundingClientRect().left;
let shiftY = event.clientY - zyk.getBoundingClientRect().top;
Далі при переносі жука ми позиціонуємо його з тим самим зрушенням щодо покажчика миші, ось так:
// onmousemove
// zyk has position:absoute
zyk.style.left = event.pageX - shiftX + 'px';
zyk.style.top = event.pageY - shiftY + 'px';
Подія mousemove відстежується на document, а не на zyk. З першого погляду здається, що миша завжди над жуком і обробник mousemove можна повісити на сам zyk, а не на документ.
Але подія mousemove виникає хоч і часто, але не для кожного пікселя. Тому через швидкий руху покажчик може зістрибнути з сонечко і опинитися десь у середині документа (або навіть за межами вікна). Ось чому ми повинні відстежувати mousemove на всьому document, щоб зловити його.
Була ще одна проблема,сонечко завжди знаходиться поверх інших елементів, тому події спрацьовують на ньому. Хоч би які обробники ми ставили на нижні елементи, вони не будуть виконані.
Ось чому ідея поставити обробники на потенційні цілі перенесення нереалізована. Обробники не спрацюють.
Але існує метод document.elementFromPoint(clientX, clientY). Він повертає найглибше вкладений елемент за заданими координатами вікна (або null, якщо зазначені координати знаходяться за межами вікна).
Ми можемо використовувати його, щоб з будь-якого оброблювача подій миші з'ясувати, над якою ми потенційною метою перенесення, ось так:
// всередині обробника події миші
zyk.hidden=true; // (*) ховаємо елемент, що переноситься
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
// elemBelow - елемент під сонечком (можлива мета перенесення)
zyk.hidden = false;
Зауважимо, що нам потрібно сховати сонечко перед викликом функції (*). В іншому випадку за цими координатами ми будемо отримувати сонечко, адже це є елемент безпосередньо під покажчиком: elemBelow=zyk. Так що ми ховаємо його і відразу показуємо назад.
Ми можемо використовувати цей код для перевірки того, над яким елементом ми летимо, у будь-який час. І обробити закінчення перенесення, коли воно станеться.
Браузер має свій власний Drag&Drop, який автоматично запускається та вступає у конфлікт із нашим. Це відбувається саме для картинок та деяких інших елементів. Його потрібно відключити (рядки коду 60-62)
На цій основі можна зробити багато.
Існують фреймворки, які будують архітектуру поверх цього алгоритму, створюючи такі класи, як DragZone, Droppable, Draggable. Більшість із них роблять речі, аналогічні описаним вище. Ви можете створити свою власну реалізацію переносу, як бачите, це досить просто, можливо, простіше, ніж адаптація чогось готового.
