logo

TechCodeview

JavaScript addEventListener()

The addEventListener() Метод використовується для приєднання обробника події до певного елемента. Він не замінює існуючі обробники подій. Кажуть, що події є важливою частиною JavaScript. Веб-сторінка реагує відповідно до події, що сталася. Події можуть бути згенеровані користувачами або API. Слухач подій — це процедура JavaScript, яка очікує на виникнення події.

Метод addEventListener() є вбудованою функцією JavaScript . Ми можемо додати кілька обробників подій до певного елемента, не перезаписуючи існуючі обробники подій.

Синтаксис

 element.addEventListener(event, function, useCapture);

Хоча він має три параметри, параметри подія і функція широко використовуються. Третій параметр необов’язковий для визначення. Значення цієї функції визначаються наступним чином.

Значення параметрів

подія: Це обов'язковий параметр. Його можна визначити як рядок, що вказує назву події.

Примітка. Не використовуйте жодних префіксів, таких як «on», зі значенням параметра. Наприклад, використовуйте «click» замість «onclick».

функція: Це теж обов'язковий параметр. Це функція JavaScript який реагує на подію, що відбувається.

json у прикладі json

useCapture: Це необов'язковий параметр. Це значення типу Boolean, яке вказує, чи подія виконується у фазі підсвічування чи захоплення. Його можливі значення такі правда і помилковий . Якщо встановлено значення true, обробник події виконується на етапі захоплення. Якщо для нього встановлено значення false, обробник виконується у фазі кипіння. Його значення за замовчуванням помилковий .

Давайте подивимося деякі ілюстрації використання методу addEventListener().

приклад

Це простий приклад використання методу addEventListener(). Ми повинні клацнути на даному кнопка HTML щоб побачити ефект.

Приклад методу addEventListener().

Натисніть наступну кнопку, щоб побачити ефект.

що таке об'єкт java
Клацніть мене document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Ласкаво просимо на javaTpoint.com'; }Перевірте зараз

Вихід

JavaScript addEventListener()

Після натискання вказаної кнопки HTML результат буде таким:

JavaScript addEventListener()

Тепер у наступному прикладі ми побачимо, як додати багато подій до того самого елемента, не перезаписуючи існуючі події.

приклад

У цьому прикладі ми додаємо кілька подій до одного елемента.

Це приклад додавання кількох подій до одного елемента.

Натисніть наступну кнопку, щоб побачити ефект.

Click me function fun() { alert('Ласкаво просимо на javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Це друга функція'; } function fun2() { document.getElementById('para1').innerHTML = 'Це третя функція'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('клацання', весело); mybtn.addEventListener('клацніть', fun1); mybtn.addEventListener('клацання', fun2);Перевірте зараз

Вихід

JavaScript addEventListener()

Тепер, коли ми натискаємо кнопку, відображатиметься сповіщення. Після натискання вказаної кнопки HTML результат буде таким:

JavaScript addEventListener()

Коли ми виходимо з оповіщення, виводом буде -

точка numpy
JavaScript addEventListener()

приклад

У цьому прикладі ми додаємо кілька подій різного типу до одного елемента.

Це приклад додавання кількох подій різного типу до одного елемента.

Натисніть наступну кнопку, щоб побачити ефект.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'жовтий'; btn.style.color = 'синій'; } function fun1() { document.getElementById('para').innerHTML = 'Це друга функція'; } функція fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('наведення миші', весело); mybtn.addEventListener('клацніть', fun1); mybtn.addEventListener('mouseout', fun2);Перевірте зараз

Вихід

JavaScript addEventListener()

Коли ми наведемо курсор на кнопку, результат буде -

JavaScript addEventListener()

Після натискання кнопки та залишення курсору виведення буде -

JavaScript addEventListener()

Бульбування подій або захоплення подій

Тепер ми розуміємо використання третього параметра addEventListener() JavaScript, тобто useCapture.

У HTML DOM, Булькання і захоплення це два шляхи поширення подій. Ми можемо зрозуміти ці способи на прикладі.

факториал в java

Припустімо, у нас є елемент div і елемент абзацу всередині нього, і ми застосовуємо 'клік' події для них обох за допомогою addEventListener() метод. Тепер питання полягає в клацанні елемента абзацу, яка подія клацання елемента обробляється першою.

Отже, в Булькання, спочатку обробляється подія елемента абзацу, а потім обробляється подія елемента div. Це означає, що під час витікання спочатку обробляється подія внутрішнього елемента, а потім обробляється подія зовнішнього елемента.

в захоплення спочатку обробляється подія елемента div, а потім обробляється подія елемента абзацу. Це означає, що під час захоплення спочатку обробляється подія зовнішнього елемента, а потім обробляється подія самого внутрішнього елемента.

javascript оператор if 
 addEventListener(event, function, useCapture);

Ми можемо вказати поширення за допомогою useCapture параметр. Якщо для нього встановлено значення false (це його значення за замовчуванням), тоді подія використовує спливаюче поширення, а коли встановлено значення true, відбувається захоплення поширення.

Ми можемо зрозуміти булькаючий і захоплення використовуючи ілюстрацію.

приклад

У цьому прикладі є два елементи div. Ми бачимо ефект кипіння на першому елементі div і ефект захоплення на другому елементі div.

Коли ми двічі клацаємо елемент span першого елемента div, тоді подія елемента span обробляється першою, ніж елемент div. Це називається булькаючий .

Але коли ми двічі клацаємо елемент span другого елемента div, тоді подія елемента div обробляється першою, ніж елемент span. Це називається захоплення .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Перевірте зараз

Вихід

JavaScript addEventListener()

Ми повинні двічі клацнути певні елементи, щоб побачити ефект.