Coding for Future in Lutsk. JavaScript. Part 14

Події
Об'єктна модель документа (DOM) дозволяє
надати скриптам JavaScript можливість
реагувати на події в браузері.
Приклади HTML-подій:
• Клік мишкою на певному елементі
• Завантаження документа
• Завантаження зображення
• Наведення мишки на елемент
• Зміна поля у формі
• Надсилання форми
• Натискання клавіші

Обробка подій через атрибут HTML
Обробку події можна призначити у відповідному атрибуті тега.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script>
function showDate() {
var date = new Date();
alert( date.toLocaleString("uk", {weekday: 'long',
day: 'numeric', month: 'long', year: 'numeric'}) );
}
</script>
</head>
<body>
<p onclick="alert('Тестовий клік')">Тестовий клік</p>
<input value="Кнопка" onclick="showDate()" type="button">
</body></html>

Зауваження:
Атрибути HTML нечутливі до регістру.
Працює ONCLICK, onCLICK.
Традиційно: onclick.
onclick="alert("Клік")" – не можна.
Можна так:
onclick="alert('Клік')",
або onclick='alert("Клік")',
або
onclick="alert("Клік")".

Задача 64
Доповніть фрагмент сторінки
<body>
<button onclick="countClicks()">Клікати
тут</button>
<p id="demo"></p>
</body>
кодом, який виводитиме в абзаці
demo кількість кліків по кнопці.

Розв’язок
<body>
<button onclick="countClicks()">Клікати тут</button>
<p id="demo"></p>
<script>
var counter = 0;
function countClicks() {
counter++;
document.getElementById("demo").innerHTML =
"Кількість кліків: " + counter;
}
</script>
</body>

Обробка подій через властивості DOM-об’єкта
Приклад:
<button id="myBtn">Спробуйте</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick =
displayDate;
function displayDate() {
document.getElementById("demo").innerHTML =
Date();
}
</script>
Можна задати навіть компактніше:
myBtn.onclick = function() {
demo.innerHTML = Date();
};

Більше одного обробника призначати не можна.
<input type="button" id="elem" onclick="alert('Обробник
1')" value="Нажми мене" />
<script>
elem.onclick = function() { // перезапише обробник
alert( 'Обробник 2' ); // виведеться тільки це
};
</script>
Обробником можна призначити вже існуючу функцію:
function sayHello() {
alert( Привіт!' );
}
elem.onclick = sayHello;
Обробник можна ліквідувати:
elem.onclick = null;

Задача 65
Створіть кнопки з написами “Кнопка 1” і
“Кнопка 2”. Напишіть код, який при
натисканні на будь-яку з кнопок мінятиме
написи місцями. Використайте DOM-
властивості.

Розв’язок
<body>
<button id="btn1">Кнопка 1</button>
<script>
btn1.onclick = funct1;
function funct1() {
var temp = btn1.innerHTML
btn1.innerHTML = btn2.innerHTML;
btn2.innerHTML = temp;
}
function funct2() {
}
</script>
</body>

Насправді тут можна обійтись тільки однією функцією:
<body>
<script>
function funct1() {
}
</script>
</body>

Доступ до властивостей елемента через this
<h1 onclick="this.innerHTML='Інший текст'">Текст</h1>
Або
<h1 onclick="changeText(this)">Текст</h1>
<script>
function changeText(id) {
id.innerHTML = "Інший текст";
}
</script>

doSomething() і doSomething
Виклик функції через DOM – doSomething.
Виклик функції через HTML-атрибут - doSomething().
<button id="btn1" onclick="click1()">HTML-атрибут</button>
<button id="btn2">DOM</button>
<p id="demo"></p>
<script>
function click1() {
document.getElementById("demo").innerHTML = "Клік на
першій кнопці";
};
btn2.onclick = click2;
function click2() {
document.getElementById("demo").innerHTML = "Клік на
другій кнопці";
};
</script>

Задача 66
Створіть сторінку з абзацами “Абзац 1”,
“Абзац 2”, “Абзац 3”. Напишіть код, який
буде виводити під ними текст “Ви клікнули
на N-му абзаці”, де N – номер абзаца, на
якому клікнув користувач.

Розв’язок
<body>
<p id="par1">Абзац 1</p>
<p id="output"></p>
<script>
par1.onclick = showChar;
function showChar() {
var txt = this.innerHTML;
output.innerHTML = "Ви клікнули на " +
txt.charAt(txt.length-1) + "-му абзаці";
}
</script>
</body>

addEventListener і removeEventListener
Це сучасний спосіб призначати і видаляти обробники
подій, причому можна використовувати скільки
завгодно будь-яких обробників.
Синтаксис:
element.addEventListener(event,
handler[, phase]);
event – ім’я події (click, mousemover…),
handler – назва функції-обробника,
phase – необов’язковий параметр (про нього
– потім).
Зауваження: click, а не onclick!

Приклад:
<body>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListe
ner("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML
= Date();
}
</script>
</body>

Можна так:
element.addEventListener("click",
function(){ alert("Hello World!"); });
(анонімна функція)
Але краще так:
myFunction);
function myFunction() {
alert ("Hello World!");
}
Видалення обробника:
element.removeEventListener(event, handler[,
phase]);
Аргументи мають бути ті самі.

Приклад з трьома обробниками і з видаленням обробників.
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
demo.innerHTML += "Moused over!<br>";
}
function mySecondFunction() {
demo.innerHTML += "Clicked!<br>";
x.removeEventListener("mouseover", myFunction);
x.removeEventListener("mouseout", myThirdFunction);
}
function myThirdFunction() {
demo.innerHTML += "Moused out!<br>";
}
</script>

Задача 67
Створіть сторінку, на якій генеруватиметься
маркований список з числами 1-20. Розмістіть
там ще два абзаци <p id="par1"></p> і <p
id="par2">0</p>. Напишіть код, який при
наведенні мишки на елементи списку буде
виводити відповідні числа у абзац par1, а при
кліках на них – виводити у par2 суму
відповідних чисел.
Підказки:
Подія наведення мишки – mouseover;
Перетворити величину x у числовий тип можна
так: +x або так: parseFloat(x).

Розв’язок
<ul>
<script>
var N = 20;
for (var i = 1; i <= N; i++) {
document.write("<li>" + i + "</li>");
}
</script>
</ul>
<p id="par1"></p> <p id="par2">0</p>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", handleMouseOver);
lis[i].addEventListener("click", handleClick);
}
function handleMouseOver(){
par1.innerHTML = this.innerHTML;
}
function handleClick(){
par2.innerHTML = +par2.innerHTML + +this.innerHTML;
}
</script>

Деякі приклади подій
mouseover і mouseout
<div id="myDiv">Поводіть тут мишкою</div>
<script>
myDiv.addEventListener("mouseover", mOver);
myDiv.addEventListener("mouseout", mOut);
function mOver() {
this.innerHTML = "Дякую"
}
function mOut() {
this.innerHTML = "Поводіть тут мишкою"
}
</script>

Або:
<div onmouseover="mOver(this)"
onmouseout="mOut(this)" >
Поводіть тут мишкою</div>
<script>
function mOver(obj) {
obj.innerHTML = "Дякую"
}
function mOut(obj) {
obj.innerHTML = "Поводіть тут мишкою"
}
</script>

mousedown, mouseup і click
(onmousedown, onmouseup і onclick)
<div id=myDiv style="background-
color:#D94A38;width:90px;height:20px;padding:40px;">
Натисніть</div>
<script>
myDiv.addEventListener("mousedown", mDown);
myDiv.addEventListener("mouseup", mUp);
function mDown() {
this.style.backgroundColor = "#1ec5e5";
this.innerHTML = "Відпустіть";
}
function mUp() {
this.style.backgroundColor="#D94A38";
this.innerHTML="Дякую";
}
</script>

Або
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-
color:#D94A38;width:90px;height:20px;padding:40px;
">
Натисніть</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Відпустіть";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Дякую";
}
</script>

load (onload)
Подія стається, коли об’єкт завантажується.
Приклади:
<body onload="myFunction()">
object.onload = function(){myScript}; //
використовується анонімна функція
object.addEventListener("load", myScript);
<img src="someimage.gif" onload="loadImage()"
width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>

Спливання і перехоплення
Якщо є кілька вкладених один в одного елементів,
події можна призначати кожному з них. Тоді, по
замовчуванню, порядок виконання – від внутрішніх
до зовнішніх. Це звуть спливанням (bubbling).
Приклад:
<div onclick="alert('DIV')">
<p onclick="alert('P')">
<span> 1 </span>
<span onclick="alert('SPAN')"> 2
</span>
<span> 3 </span>
</p>
</div>
Клік на 2 виводить SPAN, потім P, потім DIV.

Порядок виконання можна змінити на
протилежний, що називають перехопленням
(capturing ). Це робиться третім
(необов’язковим) параметром у
addEventListener, який, по
замовчуванню, дорівнює false. Отже, для
перехоплення треба писати так:
myFunction, true);

Приклад:
<div id=myDiv>
<p id=myPar>
<span> 1 </span><span id=mySpan> 2 </span><span> 3 </span>
</p>
</div>
<script>
myDiv.addEventListener("click", clickDiv, true);
myPar.addEventListener("click", clickPar, true);
mySpan.addEventListener("click", clickSpan, true);
function clickDiv() {
alert("You clicked the DIV element!");
}
function clickPar() {
alert("You clicked the P element!");
}
function clickSpan() {
alert("You clicked the SPAN element!");
}
</script>

Властивість target
Властивість події target повертає елемент, на якому
спрацювала подія.
Приклад:
<body onclick="myFunction(event)">
<p>Клікніть, і дізнаєтесь, на чому клікнули</p>
<div><strong>Зауваження:</strong> target повертає
елемент, на якому спрацювала подія, але не обов’язково
елемент, якому призначений eventlistener.</div>
<script>
function myFunction(event) {
alert(event.target.tagName);
}
</script>
</body>

Coding for Future in Lutsk. JavaScript. Part 14

Recommended

Recommended

More Related Content

Similar to Coding for Future in Lutsk. JavaScript. Part 14

Similar to Coding for Future in Lutsk. JavaScript. Part 14 (6)

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

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

Recently uploaded

Recently uploaded (13)

Coding for Future in Lutsk. JavaScript. Part 14