logo

TechCodeview

JavaScript addEventListener()

The addEventListener() koristi se za pripajanje rukovatelja događajima određenom elementu. Ne poništava postojeće rukovatelje događajima. Za događaje se kaže da su bitan dio JavaScripta. Web stranica reagira prema događaju koji se dogodio. Događaje mogu generirati korisnici ili generirati API-ji. Slušatelj događaja je JavaScriptova procedura koja čeka na pojavu događaja.

Metoda addEventListener() je ugrađena funkcija za JavaScript . Možemo dodati više rukovatelja događajima određenom elementu bez prepisivanja postojećih rukovatelja događajima.

Sintaksa

 element.addEventListener(event, function, useCapture);

Iako ima tri parametra, parametri događaj i funkcija naširoko se koriste. Treći parametar nije obavezan za definiranje. Vrijednosti ove funkcije definirane su kako slijedi.

Vrijednosti parametara

događaj: To je obavezan parametar. Može se definirati kao niz koji navodi naziv događaja.

Napomena: Nemojte koristiti nikakav prefiks kao što je 'on' s vrijednošću parametra. Na primjer, koristite 'click' umjesto korištenja 'onclick'.

funkcija: To je također obavezan parametar. To je JavaScript funkcija koji odgovara na događaj koji se dogodi.

kako ispisati java

useCapture: To je izborni parametar. To je vrijednost tipa Boolean koja određuje hoće li se događaj izvršiti u fazi bubblinga ili capturing fazi. Njegove moguće vrijednosti su pravi i lažno . Kada je postavljeno na true, rukovatelj događajem izvršava se u fazi snimanja. Kada je postavljen na false, rukovatelj se izvršava u fazi mjehurića. Njegova zadana vrijednost je lažno .

Pogledajmo neke od ilustracija korištenja metode addEventListener().

Primjer

To je jednostavan primjer korištenja metode addEventListener(). Moramo kliknuti dato HTML gumb vidjeti učinak.

Primjer metode addEventListener().

Madhuri je rekla

Pritisnite sljedeći gumb da vidite učinak.

Kliknite me document.getElementById('btn').addEventListener('klik', zabavno); funkcija fun() {document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Dobro došli na javaTpoint.com'; }Testirajte sada

Izlaz

JavaScript addEventListener()

Nakon klika na dani HTML gumb, izlaz će biti -

JavaScript addEventListener()

Sada ćemo u sljedećem primjeru vidjeti kako dodati mnogo događaja istom elementu bez prepisivanja postojećih događaja.

Primjer

U ovom primjeru dodajemo više događaja istom elementu.

Ovo je primjer dodavanja više događaja istom elementu.

Pritisnite sljedeći gumb da vidite učinak.

Click me function fun() { alert('Dobrodošli na javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Ovo je druga funkcija'; } function fun2() { document.getElementById('para1').innerHTML = 'Ovo je treća funkcija'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klik', zabava); mybtn.addEventListener('klik', zabava1); mybtn.addEventListener('klik', zabava2);Testirajte sada

Izlaz

JavaScript addEventListener()

Sada, kada kliknemo gumb, prikazat će se upozorenje. Nakon klika na dani HTML gumb, izlaz će biti -

if-else izjava java
JavaScript addEventListener()

Kada izađemo iz upozorenja, izlaz je -

JavaScript addEventListener()

Primjer

U ovom primjeru istom elementu dodajemo više događaja različite vrste.

Ovo je primjer dodavanja više događaja različite vrste istom elementu.

Pritisnite sljedeći gumb da vidite učinak.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'žuto'; btn.style.color = 'plava'; } function fun1() { document.getElementById('para').innerHTML = 'Ovo je druga funkcija'; } funkcija fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('prelazak mišem', zabavno); mybtn.addEventListener('klik', zabava1); mybtn.addEventListener('mouseout', fun2);Testirajte sada

Izlaz

JavaScript addEventListener()

Kada kursor pomaknemo preko gumba, izlaz će biti -

JavaScript addEventListener()

Nakon što kliknete gumb i napustite pokazivač, izlaz će biti -

JavaScript addEventListener()

Bubbling događaja ili snimanje događaja

Sada razumijemo upotrebu trećeg parametra JavaScript-ovog addEventListener(), tj. useCapture.

stvaranje niza nizova u Javi

U HTML DOM-u, mjehurići i Hvatanje su dva načina širenja događaja. Te načine možemo razumjeti uzimajući primjer.

Pretpostavimo da imamo element div i element paragrafa unutar njega i primjenjujemo 'klik' događaj za oboje koristeći addEventListener() metoda. Sada je pitanje o kliku na element odlomka, koji se događaj klika elementa prvi obrađuje.

Dakle, u mjehurići, prvo se obrađuje događaj elementa odlomka, a zatim se obrađuje događaj elementa div. To znači da se u bubblingu prvo obrađuje događaj unutarnjeg elementa, a zatim se obrađuje događaj najudaljenijeg elementa.

U Hvatanje prvo se obrađuje događaj elementa div, a zatim se obrađuje događaj elementa odlomka. To znači da se pri snimanju prvo obrađuje događaj vanjskog elementa, a zatim se obrađuje događaj najunutarnjeg elementa.

mysql popis svih korisnika 
 addEventListener(event, function, useCapture);

Propagaciju možemo specificirati pomoću useCapture parametar. Kada je postavljeno na false (što je njegova zadana vrijednost), tada događaj koristi bubbling propagaciju, a kada je postavljeno na true, postoji propagacija snimanja.

Možemo razumjeti mjehurićima i hvatanje pomoću ilustracije.

Primjer

U ovom primjeru postoje dva elementa div. Možemo vidjeti efekt mjehurića na prvom elementu div i učinak snimanja na drugom elementu div.

Kada dvaput kliknemo span element prvog div elementa, tada se događaj span elementa obrađuje prvi nego div element. To se zove mjehurićima .

Ali kada dvaput kliknemo na span element drugog div elementa, tada se događaj div elementa obrađuje prvi nego span element. To se zove hvatanje .

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

Izlaz

JavaScript addEventListener()

Moramo dvaput kliknuti na određene elemente da bismo vidjeli učinak.