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

Об'єкт Event

Нехай у нас є елемент,на кліку на який виконається функція func: 

<button id="elem">Елемент</button>
var elem = document.getElementById('elem');
elem.onclick = func;
function func() {	
}

Усередині прив'язаної функції вже є об'єкт Event - ми поки що не знаємо, як його отримати. Виходить він так: потрібно при оголошенні нашої функції func передати до неї параметром будь-яку змінну (наприклад, event - але назва може бути будь-яким) і в цю змінну браузер автоматично покладе об'єкт Event: 

elem.onclick = func;
function func(event) {
	тут доступний об'єкт event
}

Це працює тільки для функцій, прив'язаних до будь-якої події.

Ще раз: якщо при прив'язуванні функції до цієї функції встановити параметр - у цей параметр браузер автоматично покладе об'єкт Event. Назва цього параметра буде будь-яким - як назвете, так і звертатиметеся до нього.

Тип події

Об'єкт Event також містить тип події, наприклад для події onclick це click, Для onmouseover це mouseover і так далі. Доступ до типу події можна отримати так - event.type: 

<button id="elem">Элемент</button>
var elem = document.getElementById('elem');
elem.onclick = func;
function(event) {
	alert(event.type); //виведе 'click'
}

Елемент події

За допомогою event.target можна отримати елемент, у якому сталася подія. Навіщо це потрібно, якщо цей елемент міститься у this? Відповідь це питання дасть приклад нижче.

Нехай ми маємо div, а всередині нього абзац. Прив'яжемо подію до дива, але клацнемо по абзацу - у цьому випадку event.target міститиме кінцевий тег, в якому трапилася подія - тобто абзац, а не див. Переконайтеся в цьому за допомогою tagName: 

<div id="elem">
	<p>Абзац</p>
</div>
var div = document.getElementById('elem');

div.оnclick= func(event) {
	var target = event.target;
	alert(target.tagName); //виведе 'p' - абзац
}

Приклади

На сторінці кнопка. При натисканні на кнопку вводяться два числа, знаходиться їхня сума та виводиться результат. Розглянемо різні варіанти розв'язання цієї задачі.

Приклад 1

Функція без параметрів і без значення, що повертається. В атрибуті onclick кнопки пишемо код обробника події click - викликаємо функцію chet

Приклад простого калькулятора на JavaScript

<html>
<body>
<input type="button" value="Вычислить" onclick="chat();">
<script>
  function chat()
{
    str=prompt("Первое число=",0); x=Number(str);
    str=prompt("Второе число=",0); y=Number(str);
    s=x+y;
    alert("Сумма="+s);
}
</script>
</body>
</html>

Пояснения к коду:

  1. Створюється кнопка з обробником події onclick
  2. Функція chat() запитує два числа через prompt
  3. Перетворює рядки в числа за допомогою Number()
  4. Обчислює суму та повертає результат через alert

Приклад 2

Функція без параметрів із значенням суми, що повертається. В атрибуті onclick кнопки пишемо код обробника події click - викликаємо функцію chet і виводимо результат на екран.

Приклад простого калькулятора на JavaScript

<html>
<body>
<input type="button" value="Обчислити" 
       onclick="s=chat(); alert('Сума='+s);">
<script>
  function chat()
  {
    str = prompt("Перше число=", 0);
    x = Number(str);
    str = prompt("Друге число=", 0);
    y = Number(str);
    s = x + y;
    return s;
  }
</script>
</body>
</html>

Пояснення до коду:

Приклад 3

Функція без параметрів і без значення, що повертається. Властивості onclick елемента c id="elem" присвоюємо значення chet. Тобто вказуємо, що у разі події click у елемента з id="elem" виконувати функцію chet.

Приклад калькулятора з обробником подій

<html>
<body>
<input type="button" value="Обчислити" id="elem">
<script>
    // Отримуємо елемент за id і призначаємо обробник події
    elem.onclick = chet;
    
    function chet()
    {
        // Отримуємо перше число від користувача
        str = prompt("Перше число=", 0);
        x = Number(str);
        
        // Отримуємо друге число від користувача
        str = prompt("Друге число=", 0);
        y = Number(str);
        
        // Обчислюємо суму
        s = x + y;
        
        // Виводимо результат
        alert("Сумма=" + s);
    }
</script>
</body>
</html>

Ключові моменти:

  1. Доступ до елементу: Використовується глобальний доступ до елементу через його id (elem)
  2. Призначення обробника: Функція chet призначається як обробник події onclick
  3. Робота з користувачем: Використовуються функції prompt для введення даних
  4. Перетворення типів: Введені рядки перетворюються на числа за допомогою Number()
  5. Вивід результату: Результат виводиться через alert

Покращення, які можна внести:

Приклад 4

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

Функція з двома параметрами та значенням, що повертається.

Властивості onclick елемента c id="elem" присвоюємо значення chet.

Тобто вказуємо, що у разі події click у елемента з id="elem" виконувати функцію chet.

Приклад калькулятора з передачею параметрів

<html>
<body>
<input type="button" value="Обчислити" id="elem">
<script>
    // Отримуємо числа від користувача
    st1 = prompt("Перше число=", 0);
    st2 = prompt("Друге число=", 0);
    
    // Обчислюємо суму
    s = chet(st1, st2);
    
    // Виводимо результат
    alert("Сумма=" + s);
    
    // Призначаємо обробник події
    elem.onclick = chet;
    
    function chet(st1, st2) {
        // Перетворюємо рядки в числа
        x = Number(st1);
        y = Number(st2);
        
        // Обчислюємо суму
        s = x + y;
        
        // Повертаємо результат
        return s;
    }
</script>
</body>
</html>

Як це має працювати:

Код запитує числа при завантаженні сторінки, обчислює суму і виводить її. Кнопка "Обчислити" призначена для повторного обчислення, але в поточному вигляді вона не працюватиме коректно, оскільки функція chet не запитує нові значення при кліку.

Приклад 5

Написати програму, яка за натисканням кнопок додає рядки та стовпці до таблиці. 


std {
    width: 30px;
    height: 10px;
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css"/>
    <title>Table</title>
</head>
<body>
    <button id="add-row">Add row</button>
    <button id="add-col">Add column</button>
    <table>
        <thead id="head">
            <tr>
                <td>Head</td>
            </tr>
        </thead>
        <tbody id="body"></tbody>
        <tfoot id="foot">
            <tr>
                <td>Foot</td>
            </tr>
        </tfoot>
    </table>
    <script src="/script.js"></script>
</body>
</html>

const head = document.getElementById("head");
const body = document.getElementById("body");
const foot = document.getElementById("foot");
const addRow = document.getElementById("add-row");
const addCol = document.getElementById("add-col");
const rows = [...Array.from(head.children), ...Array.from(foot.children)];

let colsCount = 1;

addRow.onclick = () => {
    const tr = document.createElement("tr");

    for (let i = 0; i < colsCount; i++) {
        const td = document.createElement("td");
        tr.append(td);
    }

    body.append(tr);
    rows.push(tr);
};

addCol.onclick = () => {
    for (const row of rows) {
        const td = document.createElement("td");
        row.append(td);
    }
    colsCount++;
};

Приклад 6

Створимо дерево, яке на кліку на заголовок приховує-показує нащадків. Створимо таку сторінку:

    Рішення складається з двох кроків:
  1. Обертаємо текст кожного заголовка дерева в елемент span. Потім ми можемо додати стилі CSS на :hover і обробляти кліки лише тексті, т.к. ширина елемента span точно співпадає з шириною тексту.
  2. Встановлюємо обробник на кореневий вузол дерева tree і ловимо кліки на елементах span, що містять заголовки.

Розмітка виглядає так:


<body>
<div>
    <ul class="tree" id="tree">
        <li>Живопись
            <ul>
                <li>Основные стили живописи
                    <ul>
                        <li>Ренессанс (Возрождение)</li>
                        <li>Авангардизм</li>
                        <li>Барокко</li>
                        <li>Классицизм</li>
                        <li>Романтизм</li>
                        <li>Импрессионизм</li>
                        <li>Экспрессионизм</li>
                        <li>Авангардизм</li>
                    </ul>
                </li>
                <li>Жанры живописи
                    <ul>
                        <li>портрет</li>
                        <li>пейзаж</li>
                        <li>натюрморт</li>
                        <li>исторический</li>
                        <li>батальный</li>
                        <li>анималистика</li>
                        <li>марина</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Техники живописи
            <ul>
                <li>Масляная
                    <ul>
                        <li>многослойный</li>
                        <li>алла прима</li>
                    </ul>
                </li>
                <li>Другая
                    <ul>
                        <li>акварель</li>
                        <li>темпера</li>
                        <li>пастель</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS виглядає так:



<style>
div {
    background: #fce9c0; /* Цвет фона */
    border: 2px solid #a9c35B; /* Параметры рамки */
    padding: 10px; /* Поля */
    width: 30%; /* Ширина */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    font-size: 14px; /* Размер шрифта */
    color: navy;
}

.tree span:hover {
    font-weight: bold;
    color: darkred;
}

.tree span {
    cursor: pointer;
}
</style>

Пишемо скрипт:


// поміщаємо текстові вузли в елемент 
// він займає тільки те місце, яке необхідно для тексту
for (let li of tree.querySelectorAll('li')) {
    let span = document.createElement('span');
    li.prepend(span);
    span.append(span.nextSibling); // поміщаємо текстовий вузол всередину елемента 
}

// відловлюємо кліки по всьому дереву
tree.onclick = function(event) {
    if (event.target.tagName != 'SPAN') {
        return;
    }

    let childrenContainer = event.target.parentNode.querySelector('ul');
    if (!childrenContainer) return; // немає дітей

    childrenContainer.hidden = !childrenContainer.hidden;
}

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