JS метод Object.addEventListener()

Загальний опис

Метод addEventListener() є важливим інструментом у мові програмування JavaScript, який використовується для призначення обробників подій елементам DOM (Document Object Model). Він дозволяє встановити слухача (listener), який реагує на певні події, що виникають на елементі, такі як кліки миші, натискання клавіш, зміни стану форм і багато іншого. Сутність цього методу полягає в забезпеченні інтерактивності веб-сторінок, реагуванні на дії користувача та виконанні визначених дій у відповідь на ці події.

Основний синтаксис

Метод addEventListener() приймає три аргументи:

1. type: рядок, що вказує тип події, на яку слід реагувати (наприклад, "click", "mouseover").
2. listener: функція або об'єкт, що визначає дію, яка виконується при настанні події.
3. options (необов'язково): об'єкт або булеве значення, що визначає характеристики обробника події (наприклад, {capture: true}).

Приклад використання

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Кнопка натиснута!');
});

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

Варіативність використання

1. Використання анонімної функції: У наведеному вище прикладі використано анонімну функцію. Це зручно для простих обробників подій.

2. Використання іменованих функцій: Для більш складної логіки або повторного використання функції обробника можна використовувати іменовані функції.

function showAlert() {
	 alert('Кнопка натиснута!');
}

button.addEventListener('click', showAlert);

1. У цьому прикладі демонструється базове використання методу addEventListener() для відстеження натискання на кнопку. Коли користувач натискає на кнопку, в консоль виводиться повідомлення. Цей приклад є хорошим стартом для розуміння основ роботи з подіями у JavaScript.

// Отримання посилання на елемент кнопки
const button = document.getElementById("myButton");

// Додавання обробника події натискання на кнопку
button.addEventListener("click", function() {
    console.log("Кнопка була натиснута");
});

У наступному прикладі розглядається більш складний сценарій, де addEventListener() використовується для реагування на зміну значення текстового поля. Під час введення тексту у поле, його вміст перевіряється, і якщо текст співпадає з певним значенням, виконується додаткова дія. Цей приклад демонструє, як можна використовувати addEventListener() для створення динамічних взаємодій на веб-сторінці.

// Отримання посилання на текстове поле
const inputField = document.getElementById("myInput");

// Додавання обробника події для відстеження кожного введення символу
inputField.addEventListener("input", function(event) {
    // Перевірка, чи введений текст співпадає з певним значенням
    if (event.target.value === "JavaScript") {
        console.log("Ви ввели 'JavaScript'");
    }
});

Ці приклади ілюструють базовий та розширений способи застосування addEventListener() в різних контекстах і з різними типами подій, демонструючи його важливість та універсальність у розробці інтерактивних веб-сторінок.

Синтаксис

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

Параметри

*type

Рядок, що чутливий до регістру, який представляє тип події, на яку слід реагувати.

*listener

Об'єкт, який отримує повідомлення (об'єкт, що реалізує інтерфейс Event), коли відбувається подія вказаного типу. Це може бути null, об'єкт з методом handleEvent() або функція JavaScript. Вказане у цьому аргументі значення визначає, як буде оброблятися подія.

options

Об'єкт, що визначає характеристики обробника подій. Доступні опції включають налаштування такі як capture, once, passive.

useCapture

Булеве значення, що вказує, чи будуть події цього типу направлені до зареєстрованого слухача перед їхнім направленням до будь-якого EventTarget під ним у DOM-дереві. Якщо не вказано, за замовчуванням useCapture встановлюється як false.

wantsUntrusted

Параметр, специфічний для Firefox (Gecko). Якщо true, слухач отримує синтетичні події, що розповсюджуються веб-контентом. Цей параметр корисний для коду у додатках, а також у самому браузері. За замовчуванням встановлюється як false для браузерної оболонки та як true для звичайних веб-сторінок.

Return

none

Повертає undefined.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримання посилання на елемент кнопки
const button = document.getElementById("myButton");

// Додавання обробника події натискання на кнопку
button.addEventListener("click", function() {
    console.log("Кнопка була натиснута");
});

// Отримання посилання на текстове поле
const inputField = document.getElementById("myInput");

// Додавання обробника події для відстеження кожного введення символу
inputField.addEventListener("input", function(event) {
    // Перевірка, чи введений текст співпадає з певним значенням
    if (event.target.value === "JavaScript") {
        console.log("Ви ввели 'JavaScript'");
    }
});