Theme16

Події миші
• mousedown
– натискання кнопки миші над елементом.
• mouseup
– відпускання кнопки миші над елементом.
• mouseover
– мишка з’явилась над елементом.
• mouseout
– мишка пішла з елемента.
• mousemove
– рух мишки над елементом.
• click
– клік миші (= mousedown + mouseup).
• contextmenu
– клік правою кнопкою миші на елементі.
• dblclick
– подвійний клік миші.

Крім призначених обробників,
перераховані події миші мають дії
браузера по замовчуванню.
Наприклад, подвійний клік на слові
виділяє слово, права клавіша викликає
контекстне меню.
Відмінити дію по замовчуванню можна
за таким зразком:
<div oncontextmenu="return
false">Якийсь контент</div>

Координати миші
Розрізніються координати відносно вікна (clientX/clientY) і відносно
документа (pageX/pageY).
Приклад 1:
<div onmousemove="showCoords(event)"> // можна начепити і на body
Рухайте мишкою десь тут<br>
</div>
<p id="demo"></p>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
</script>

Задача 69
Завантажте і розпакуйте файл
goo.gl/VGb1M4. Змініть html-документ так,
щоб при переміщенні мишки правіше від
зображення, картинка змінювалась на
eyes_right.png.

Розв’язок
<body onmousemove="myFunction(event)">
<div style="width: 600px; height: 600px">

<img src="images/eyes_left.png" id="eyes"
style="position:absolute;left:400px;top:300px">
</div>
<script>
function myFunction(event) {
if (event.clientX > 400 + 32) {
eyes.src="images/eyes_right.png";
} else {
eyes.src="images/eyes_left.png";
}
}
</script>
</body>

setTimeout і setInterval
Ці методи дозволяють запускати функції через
задану кількість мілісекунд.
Синтаксис:
setTimeout(function, milliseconds[,
param1, param2, ...])
setInterval(function, milliseconds[,
param1, param2, ...])
Повертають ID таймера setTimeout чи
setInterval (можна використати для їх
зупинки через clearTimeout() чи
clearInterval() ).

setTimeout запускає функцію через
вказане число мілісекунд (один раз).
setInterval запускає періодично
функцію через вказане число мілісекунд.
param1, param2, ... – аргументи, які
можна передати функції (при потребі).
В якості функції може бути і анонімна
функція:
setTimeout(function() { alert('Тік-так') }, 1000);

Приклад 1.
<body>
<p>Клацніть на кнопку, щоб відкрити нове вікно, яке
автоматично закриється через 3 секунди</p>
<button onclick="openWin()">Відкрити
"myWindow"</button>
<script>
function openWin() {
var myWindow = window.open("", "myWindow",
"width=200, height=100");
myWindow.document.write("<p>Це вікно
'myWindow'</p>");
setTimeout(function(){ myWindow.close() },
3000);
}
</script>
</body>

Приклад 2.
<p>Наш час:</p>
<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>

setTimeout і setInterval повертають
ідентифікатори таймера timerId, які можна
використати для скасування дій.
Синтаксис:
var timerId = setTimeout(...);
clearTimeout(timerId);

Приклад 3 (clearTimeout).
<p>Клацніть на "кнопка 1" і через 3 сек буде alert</p>
<p>Але якщо встигнете клацнути на "кнопка 2", то нічого
не буде</p>
<button onclick="myFunction()">кнопка 1</button>
<button onclick="myStopFunction()">кнопка 2</button>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello")
}, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
</script>

Задача 70
Завантажте зображення: goo.gl/4gUP6s
Створіть html-документ з зображенням
dice6.png і кнопками Start і Stop.
Напишіть код, який при натисканні на
Start випадковим чином змінюватиме
зображення з інтервалом 1 сек. Кнопка
Stop повинна зупиняти зміну.

Розв’язок
<img src="images/dice6.png" id=diceImage>
<button onclick="startMove()">Start</button>
<button onclick="stopMove()">Stop</button>
<script>
var timerID;
function startMove() {
timerID = setInterval(changeImage, 1000);
}
function stopMove() {
clearTimeout(timerID);
}
function changeImage() {
var rnd=Math.floor(Math.random()*6) + 1;
diceImage.src="images/dice"+rnd+".png";
}
</script>

Задача 70.1
Змініть код з попередньої задачі так, щоб
інтервал між змінами зображень щоразу
збільшувався на 20%, починаючи від 50 ms.
Зміна повинна припинитись, коли інтервал
досягає значення 1000 ms.

Розв’язок
<script>
var timerID;
var interval = 50;
function startMove() {
timerID = setTimeout(changeImage, interval);
}
function stopMove() {
}
function changeImage() {
var rnd=Math.floor(Math.random()*6) + 1;
diceImage.src="images/dice"+rnd+".png";
interval *= 1.2;
if (interval > 1000) {
interval = 50;
} else {
startMove();
}
}
</script>

Задача 70.2
Домашнє завдання:
1. Змініть код з попередньої задачі так,
щоб старт і стоп спрацьовували при
натисканні на ту саму кнопку.
2. Змініть функцію зміни зображення так,
щоб зміна гарантовано відбувалась на
іншу картинку.

Theme16

Recommended

Recommended

More Related Content

More from Олег Вілігурський

More from Олег Вілігурський (20)

Recently uploaded

Recently uploaded (10)

Theme16