Тхе аддЕвентЛистенер() метода се користи за прикључивање руковаоца догађаја одређеном елементу. Не замењује постојеће руковаоце догађајима. За догађаје се каже да су суштински део ЈаваСцрипт-а. Веб страница реагује у складу са догађајем који се догодио. Догађаји могу бити генерисани од стране корисника или генерисани од стране АПИ-ја. Слушалац догађаја је ЈаваСцрипт процедура која чека на појаву догађаја.

Метод аддЕвентЛистенер() је уграђена функција ЈаваСцрипт . Можемо додати више обрађивача догађаја одређеном елементу без преписивања постојећих руковалаца догађајима.

Синтакса

 element.addEventListener(event, function, useCapture); 

Иако има три параметра, параметри догађај и функција се широко користе. Трећи параметар је опционо дефинисан. Вредности ове функције су дефинисане на следећи начин.

Вредности параметара

догађај: То је обавезан параметар. Може се дефинисати као стринг који специфицира име догађаја.

Напомена: Немојте користити никакав префикс као што је 'он' са вредношћу параметра. На пример, користите 'клик' уместо 'онцлицк'.

функција: То је такође обавезан параметар. То је ЈаваСцрипт функција који реагује на догађај који се догоди.

алгоритам за рса

усеЦаптуре: То је опциони параметар. То је вредност Боолеан типа која одређује да ли се догађај извршава у фази пуштања или снимања. Његове могуће вредности су истина и лажно . Када је постављено на тачно, обрађивач догађаја се извршава у фази хватања. Када је постављено на фалсе, руковалац се извршава у фази бубблења. Његова подразумевана вредност је лажно .

Хајде да видимо неке од илустрација коришћења методе аддЕвентЛистенер().

Пример

То је једноставан пример коришћења методе аддЕвентЛистенер(). Морамо кликнути на дато ХТМЛ дугме да видите ефекат.

Пример методе аддЕвентЛистенер().

Кликните на следеће дугме да бисте видели ефекат.

Излаз

Након што кликнете на дато ХТМЛ дугме, излаз ће бити -

Сада, у следећем примеру ћемо видети како додати много догађаја истом елементу без преписивања постојећих догађаја.

Пример

У овом примеру, истом елементу додајемо више догађаја.

претворити стринг у јсон јава

Ово је пример додавања више догађаја истом елементу.

Кликните на следеће дугме да бисте видели ефекат.

орацле скл није једнак

Излаз

Сада, када кликнемо на дугме, биће приказано упозорење. Након што кликнете на дато ХТМЛ дугме, излаз ће бити -

Када изађемо из упозорења, излаз је -

Пример

У овом примеру, истом елементу додајемо више догађаја различитог типа.

Ово је пример додавања више догађаја различитог типа истом елементу.

Кликните на следеће дугме да бисте видели ефекат.

Излаз

Када померимо курсор преко дугмета, излаз ће бити -

величина текста латекса

Након што кликнете на дугме и оставите курсор, излаз ће бити -

Бублинг догађаја или снимање догађаја

Сада разумемо употребу трећег параметра ЈаваСцрипт-овог аддЕвентЛистенер(), тј. усеЦаптуре.

У ХТМЛ ДОМ-у, Бубблинг и Цаптуринг су два начина ширења догађаја. Ове начине можемо разумети узимајући пример.

Претпоставимо да унутар њега имамо елемент див и елемент параграфа, а ми примењујемо 'клик' догађај да обоје користе аддЕвентЛистенер() методом. Сада је питање клика на елемент пасуса, догађај клика на који елемент се први обрађује.

Дакле, у мехурићи, прво се обрађује догађај елемента параграфа, а затим се обрађује догађај елемента див. То значи да се у бубблингу прво обрађује догађај унутрашњег елемента, а затим ће се руковати догађај најудаљенијег елемента.

Ин Цаптуринг прво се обрађује догађај елемента див, а затим се обрађује догађај елемента параграфа. То значи да се приликом снимања прво обрађује догађај спољашњег елемента, а затим се обрађује догађај унутрашњег елемента.

како да онемогућите режим програмера

 addEventListener(event, function, useCapture); 

Можемо одредити ширење користећи усеЦаптуре параметар. Када је постављен на фалсе (што је његова подразумевана вредност), онда догађај користи пропагацију мехурића, а када је постављен на труе, постоји ширење хватања.

Можемо разумети жуборење и хватање користећи илустрацију.

Пример

У овом примеру постоје два елемента див. Можемо видети ефекат мехурића на првом елементу див и ефекат хватања на другом елементу див.

Када двапут кликнемо на елемент спан првог елемента див, тада се први обрађује догађај елемента спан него елемент див. Зове се жуборење .

Али када двапут кликнемо на елемент спан другог елемента див, тада се први обрађује догађај елемента див него елемент спан. Зове се хватање .

 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); 

Излаз

Морамо двапут кликнути на одређене елементе да бисмо видели ефекат.