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(), необхідно чітко визначити тип події, на яку буде реагувати обробник. Наприклад, якщо потрібно відслідковувати натискання на кнопку, використовуйте тип події "click". Це забезпечить точне та ефективне реагування програми на дії користувача.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Рекомендується використовувати анонімні функції або стрілкові функції як обробники подій у методі addEventListener(). Це дозволяє забезпечити гнучкість та зручність при написанні коду, особливо при реалізації багаторазових обробників подій.

element.addEventListener("click", () => {
	 console.log("Кнопка натиснута");
});

автор: Bond правити

Нотатка

Використання третього параметра у addEventListener(), об'єкта опцій, дає можливість вказати додаткові налаштування, такі як capture, once, та passive. Ці опції дозволяють контролювати фазу захоплення події, одноразове використання обробника та можливість пасивного прослуховування, що поліпшує продуктивність в деяких сценаріях.

element.addEventListener("scroll", () => {
	 // Обробка події прокрутки
}, { passive: true });

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

type

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

автор: Bond

правити

listener

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

автор: Bond

правити

options

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

автор: Bond

правити

useCapture

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

автор: Bond

правити

wantsUntrusted

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

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<input type="text" id="myInput" value="текст для прикладу" placeholder="Введи щось">

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

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

<button id="myButton">Натисни</button>

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

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