Events

Клієнтські програми на мові JavaScript ґрунтуються на такому способі програмування, як програмування, кероване подіями.

Коли з документом або деяким його елементом щось відбувається (змінюються його властивості), браузер генерує подію. Подія – це сигнал від браузера про те, що щось сталося. Всі DOM-вузли подають такі сигнали (хоча події бувають і не тільки в DOM).

При такому стилі програмування потрібно писати функції, які будуть виконуватися у разі тієї чи іншої події з цим елементом.

Такі функції називаються обробниками цієї події для цього елемента.

З якими об'єктами може відбуватися подія

Події можна призначити обробник, тобто функцію, яка спрацює, як тільки подія сталася. Саме завдяки обробникам JavaScript код може реагувати на дії користувача. Є кілька способів призначити події обробник, про це далі.

Незважаючи на різноманітність подій та підсумкових об'єктів подій, які ми можемо отримати, вони мають деякі спільні властивості. Ця загальна частина залежить від того, що це об'єкти подій походять від основного типу Event (технічно мається на увазі Interface). Нижче перераховані деякі з відомих властивостей типу Event, які ми використовуватимемо:

Щоб як слід зрозуміти призначення цих властивостей, потрібно заглибитись у розуміння самих подій. Ми поки що не досягли потрібної глибини, тому просто знайте, що вони є.

Обробка подій в JavaScript

JavaScript дозволяє нам обробляти події та реагувати на них. Є три основні способи це зробити:

Обробники подій (addEventListener) є рекомендованим методом, але ви можете зустріти інші варіанти, тому ми розглянемо всі три.

1. Обробник подій в атрибуті HTML

Найпростіший спосіб, але не рекомендується для складних додатків.

<button onclick="alert('Клікнуто!')">Клікни мене</button>

Або з викликом функції:

<button onclick="handleClick()">Клікни мене</button>

<script>
function handleClick() {
    alert('Функція handleClick викликана!');
}
</script>

2. Властивість onevent в JavaScript

Кращий підхід, ніж HTML-атрибути, але дозволяє призначити лише один обробник.

<button id="myButton">Клікни мене</button>

<script>
document.getElementById('myButton').onclick = function() {
    alert('Обробник через onclick!');
};
</script>

Важливо: якщо призначити новий обробник, старий буде перезаписано:

// Перший обробник
element.onclick = function() { alert('Перший обробник'); };

// Другий обробник перезапише перший
element.onclick = function() { alert('Другий обробник'); };

3. Методи addEventListener/removeEventListener

Найкращий спосіб, який дозволяє додавати кілька обробників до однієї події.

<button id="bestButton">Клікни мене</button>

<script>
const button = document.getElementById('bestButton');

// Перший обробник
button.addEventListener('click', function() {
    alert('Перший обробник події click');
});

// Другий обробник (не перезаписує перший)
button.addEventListener('click', function() {
    alert('Другий обробник події click');
});
</script>

Видалення обробника подій

Для видалення обробника потрібно передати ту саму функцію:

function handleClick() {
    alert('Обробник події');
    // Видаляємо цей обробник після першого кліку
    button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);

Порівняння методів

Метод	Переваги	Недоліки
HTML-атрибут	Простий у використанні	Змішує HTML і JavaScript, обмежені можливості
Властивість onevent	Розділяє HTML і JavaScript	Можна призначити лише один обробник
addEventListener	Дозволяє багато обробників, більше контролю	Трохи складніший синтаксис

Висновок

Для сучасного JavaScript найкраще використовувати addEventListener, оскільки:

ЩО ТАКЕ ПРОГРАМУВАННЯ,ЩО КЕРУЄТЬСЯ ПОДІЯМИ