logo

TechCodeview

JavaScript addEventListener()

The addEventListener() се използва за прикачване на манипулатор на събитие към определен елемент. Той не отменя съществуващите манипулатори на събития. Твърди се, че събитията са съществена част от JavaScript. Уеб страницата реагира според настъпилото събитие. Събитията могат да бъдат генерирани от потребители или от API. Прислушвателят на събития е процедура на JavaScript, която чака появата на събитие.

Методът addEventListener() е вградена функция на JavaScript . Можем да добавим множество манипулатори на събития към определен елемент, без да презаписваме съществуващите манипулатори на събития.

Синтаксис

 element.addEventListener(event, function, useCapture);

Въпреки че има три параметъра, параметрите събитие и функция се използват широко. Третият параметър не е задължителен за дефиниране. Стойностите на тази функция са определени по следния начин.

Стойности на параметрите

събитие: Това е задължителен параметър. Може да се дефинира като низ, който указва името на събитието.

Забележка: Не използвайте никакъв префикс като 'on' със стойността на параметъра. Например, използвайте „click“ вместо „onclick“.

функция: Това също е задължителен параметър. Това е JavaScript функция който реагира на настъпилото събитие.

алгоритъм на кабината

useCapture: Това е незадължителен параметър. Това е стойност от тип Boolean, която указва дали събитието се изпълнява във фазата на кипене или прихващане. Възможните му стойности са вярно и невярно . Когато е зададено на true, манипулаторът на събития се изпълнява във фазата на прихващане. Когато е зададено на false, манипулаторът се изпълнява във фазата на кипене. Стойността му по подразбиране е невярно .

Нека видим някои от илюстрациите за използване на метода addEventListener().

Пример

Това е прост пример за използване на метода addEventListener(). Трябва да щракнем върху даденото HTML бутон за да видите ефекта.

Пример за метода addEventListener().

nbsp

Щракнете върху следния бутон, за да видите ефекта.

Щракни върху мен document.getElementById('btn').addEventListener('щракни', забавно); функция 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('click', fun1); mybtn.addEventListener('щракване', fun2);Тествайте сега

Изход

JavaScript addEventListener()

Сега, когато щракнем върху бутона, ще се покаже предупреждение. След като щракнете върху дадения HTML бутон, изходът ще бъде -

пощальон
JavaScript addEventListener()

Когато излезем от предупреждението, изходът е -

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('mouseover', забавно); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Тествайте сега

Изход

JavaScript addEventListener()

Когато преместим курсора върху бутона, изходът ще бъде -

JavaScript addEventListener()

След като щракнете върху бутона и оставите курсора, изходът ще бъде -

JavaScript addEventListener()

Прехвърляне на събития или улавяне на събития

Сега разбираме използването на третия параметър на addEventListener() на JavaScript, т.е. useCapture.

чертане на правоъгълник на gimp

В HTML DOM, Кълкочене и Улавяне са двата начина за разпространение на събитието. Можем да разберем тези начини, като вземем пример.

Да предположим, че имаме елемент div и параграф параграф вътре в него и прилагаме 'клик' събитие и за двамата с помощта на addEventListener() метод. Сега въпросът е при щракване върху елемента на абзаца, събитието за щракване на елемента се обработва първо.

И така, в бълбукане, събитието на елемента параграф се обработва първо, а след това се обработва събитието на елемента div. Това означава, че при бълбукане първо се обработва събитието на вътрешния елемент, а след това ще се обработва събитието на най-външния елемент.

в Улавяне първо се обработва събитието на елемента div, а след това събитието на елемента параграф. Това означава, че при заснемането първо се обработва събитието на външния елемент, а след това ще се обработва събитието на най-вътрешния елемент.

въвеждане на низ в java 
 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()

Трябва да щракнете два пъти върху конкретните елементи, за да видите ефекта.