Події миші:

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

click – відбувається, коли клацнули на елемент лівою кнопкою миші (на пристроях із сенсорними екранами воно відбувається при торканні).
contextmenu – відбувається, коли клацнули на елемент правою кнопкою миші.
mouseover / mouseout – коли миша наводиться на / залишає елемент.
mousedown / mouseup – коли натиснули / відпустили кнопку миші на елементі.
mousemove – під час руху миші.

Назви цих подій можуть вже дати деяке уявлення про їхнє призначення, але ми, проте, розглянемо кожне з них докладніше.

Одинарний або подвійний клік

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

dblclick спрацьовує, коли ви швидко клацаєте мишею двічі.

Код для використання цієї події буде наступним:


let button = document.querySelector("#myButton");
button.addEventListener("dblclick", doSomething, false);
 function doSomething(e) { 
              console.log("Mouse clicked on something...twice!");
}

Час між кліками, що визначає спрацювання події dblclick, закладено в ОС, де відбувається виконання коду. Воно не залежить від браузера і не визначається (не зчитується) користувачем за допомогою JavaScript.

Якщо раптом трапиться прослуховувати і подію click, і подію dblclick для елемента, обробники подій будуть викликані три рази при подвійному клацання. Ви отримаєте дві події клацання, які будуть відповідати кожному клацанню. Після другого клацання ви також отримаєте подію dblclick.

mousedown и mouseup

Коли ви натискаєте кнопку миші, спрацьовує подію mousedown. Коли ви відпускаєте натискання, спрацьовує подію mouseup. Якщо натискання та відпускання відбулося на тому самому елементі, тоді також спрацює подія click.

Все це показано в наступному фрагменті коду:

let button = document.querySelector("#myButton");
button.addEventListener("mousedown", mousePressed, false);
button.addEventListener("mouseup", mouseReleased, false);
button.addEventListener("click", mouseClicked, false);
function mousePressed(e) {
console.log("Mouse is down!");
}
function mouseReleased(e) {
console.log("Mouse is up!");
}
function mouseClicked(e) {
console.log("Mouse is clicked!");
}

Справедливе запитання: «Навіщо морочитися цими двома подіями?» Здається, що подія click ідеально підходить для більшості випадків, коли може знадобитися mousedown та mouseup.

Але події mousedown і mouseup просто дають більше контролю, коли він потрібний. Деякі взаємодії (начебто перетягування або прийомів у відеоіграх, коли ви затримуєте натискання, і спрацювала лише подія mousedown, але не mouseup.

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

Приклад 1

У цьому прикладі в html-коді ми бачимо кнопку. У кнопки є атрибут onclick («по клацанню»), у значенні якого стоїть виклик функції під назвою message(). Це функція користувача, описана вище в скрипті. У самій функції виводиться діалогове вікно, що й задано відповідно до завдання.

Скрипт при такій обробці події зазвичай знаходиться в області head документа

Приклад 2

Приклад 3

У всіх трьох випадках при натисканні на кнопку з'явиться вікно:

Подія Load виникає для елемента body, коли закінчено завантаження документа.

Приклад 4

У цьому прикладі після завантаження сторінки буде виведено повідомлення «Сторінка завантажена»

Як об'єднати об'єкт, подію та її обробник

Є кілька способів призначити події обробник:

Команда обробника може бути написана прямо в елементі, в атрибуті, який називається on<подія>. Наприклад:
```
 <html>
<body>
    <input type="button" value="Click me!" onclick="alert('Click!')">
</body>
</html>
```
Зверніть увагу, для вмісту атрибуту onclick використовуються одинарні лапки, оскільки сам атрибут знаходиться в подвійних.
Атрибут HTML-тегу – не найзручніше місце для написання великої кількості коду, тому краще створити окрему JavaScript-функцію та викликати її там.
В атрибуті елемента можна написати виклик функції, а саму функцію описати у скрипті. Наприклад:
```
<html>
<body>
<input type="button" value="Hawars" onclick="countRabbits()">
<script>
  function countRabbits() {
    for(let i=1; i<=3; i++)
    {
    alert("Кролик номер " + i);
    }
    }
</script>
</body>
</html>
```
Використання властивості DOM-об'єкта
Можно призначати обробник, використовуючи властивість DOM-елемента onподія.
```
<html>
<body>
<input type="button" value="Натисни" id="elem">
<script>
    elem.onclick=hello;
    function hello()
    {
    alert("Дякую!");
    }
</script>
</body>
</html>
```
Що означає запис: elem.onclick=hello;
Це оператор присвоєння. Що чому присвоюється?
У елемента elem (наша кнопка) є властивості, у тому числі властивість on<подія> для будь-якої події (у нас click), яка може статися з цим елементом.
Значення цієї властивості – ім'я функції-обробника, яка має виконуватися у разі виникнення цієї події (у нас hello). Ось це ім'я функції ми присвоюємо.
Зверніть увагу, що ім'я функції hello, без круглих дужок, тому що функція в цьому місці не виконується, а просто вказується її ім'я (якщо функція написана без круглих дужок, наприклад func, то вона повертає свій вихідний код, а якщо з круглими дужками, наприклад func(), повертає результат роботи функції).
Обробником можна призначити анонімну функцію. Якщо після function є ім'я - функція іменована, у всіх інших випадках анонімна.

У цьому коді ми зберігаємо посилання на кнопку всередині змінної btn. Ми також визначаємо функцію, яка повертає довільне число. Третя частина коду - обробник події, onclick, що є анонімною функцією, що містить код, який генерував випадковий колір RGB і встановлює колір фону body, що дорівнює йому.

Обробником можна призначити стрілкову функцію.

Напишіть програму, яка після натискання кнопки створює нове вікно, в яке виводиться існуючий html-документ (11.html) і після натискання іншої кнопки, закриває створене вікно.

Розмітка


<html>
<head>
<style>
body{background-color:PaleGreen;}
input{font-weight:bold;}
</style>
</head>
<body>
<input type="button" value="Open" id="opn">
<input type="button" value="Close" id="cls">
<script>
var win;
opn.onclick = () =>{
    win=window.open('11.html','www','width=300,height=300');
    }
cls.onclick = () =>{win.close();}
</script>
</body>
</html>

Назад Вперед Зміст