The addEventListener() metóda sa používa na pripojenie obsluhy udalosti ku konkrétnemu prvku. Neprepisuje existujúce obslužné programy udalostí. Udalosti sú vraj podstatnou súčasťou JavaScriptu. Webová stránka reaguje podľa udalosti, ktorá nastala. Udalosti môžu byť generované používateľom alebo generované pomocou API. Poslucháč udalostí je procedúra JavaScriptu, ktorá čaká na výskyt udalosti.
Metóda addEventListener() je vstavaná funkcia JavaScript . Ku konkrétnemu prvku môžeme pridať viacero obslužných programov udalostí bez toho, aby sme prepísali existujúce obslužné rutiny udalostí.
Syntax
element.addEventListener(event, function, useCapture);
Hoci má tri parametre, parametre udalosť a funkciu sú široko používané. Tretí parameter je voliteľný na definovanie. Hodnoty tejto funkcie sú definované nasledovne.
Hodnoty parametrov
udalosť: Je to povinný parameter. Môže byť definovaný ako reťazec, ktorý špecifikuje názov udalosti.
Poznámka: S hodnotou parametra nepoužívajte žiadnu predponu, napríklad „on“. Napríklad použite „click“ namiesto použitia „onclick“.
funkcia: Je to tiež povinný parameter. Je to a Funkcia JavaScript ktorý reaguje na udalosť, ktorá nastala.
pole reťazcov c programovanie
použite Capture: Je to voliteľný parameter. Je to hodnota typu Boolean, ktorá určuje, či sa udalosť vykoná vo fáze prebublávania alebo zachytávania. Jeho možné hodnoty sú pravda a falošný . Keď je nastavená na hodnotu true, obsluha udalosti sa vykoná vo fáze zachytávania. Keď je nastavená na hodnotu false, obsluha sa vykoná vo fáze bublania. Jeho predvolená hodnota je falošný .
Pozrime sa na niektoré ilustrácie použitia metódy addEventListener().
Príklad
Je to jednoduchý príklad použitia metódy addEventListener(). Dané musíme kliknúť tlačidlo HTML aby ste videli efekt.
Príklad metódy addEventListener().
java while podmienka
Kliknutím na nasledujúce tlačidlo zobrazíte efekt.
Click me document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Ahoj svet' + '' + 'Vitajte na javaTpoint.com'; }Vyskúšajte to
Výkon
Po kliknutí na dané HTML tlačidlo bude výstup -
Teraz v ďalšom príklade uvidíme, ako pridať veľa udalostí do rovnakého prvku bez prepísania existujúcich udalostí.
Príklad
V tomto príklade pridávame viacero udalostí do rovnakého prvku.
Toto je príklad pridania viacerých udalostí do rovnakého prvku.
Kliknutím na nasledujúce tlačidlo zobrazíte efekt.
Click me function fun() { alert('Vitajte na javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Toto je druhá funkcia'; } function fun2() { document.getElementById('para1').innerHTML = 'Toto je tretia funkcia'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('kliknutie', zábava); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Vyskúšajte toVýkon
Teraz, keď klikneme na tlačidlo, zobrazí sa upozornenie. Po kliknutí na dané HTML tlačidlo bude výstup -
python generuje uuid
Keď opustíme výstrahu, výstupom je -
Príklad
V tomto príklade pridávame do rovnakého prvku viacero udalostí rôzneho typu.
Toto je príklad pridania viacerých udalostí rôzneho typu do rovnakého prvku.
Kliknutím na nasledujúce tlačidlo zobrazíte efekt.
Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'žltá'; btn.style.color = 'modrá'; } function fun1() { document.getElementById('para').innerHTML = 'Toto je druhá funkcia'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('presunutie myšou', zábava); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Vyskúšajte toVýkon
Keď presunieme kurzor nad tlačidlo, výstup bude -
Po kliknutí na tlačidlo a opustení kurzora bude výstup -
Prebublávanie udalostí alebo zachytávanie udalostí
Teraz chápeme použitie tretieho parametra addEventListener() JavaScriptu, t.j. použite Capture.
plná forma
V HTML DOM, Bublanie a Zachytenie sú dva spôsoby šírenia udalostí. Tieto spôsoby môžeme pochopiť na príklade.
Predpokladajme, že v ňom máme prvok div a prvok odseku a aplikujeme prvok 'klikni' udalosť pre oboch pomocou addEventListener() metóda. Teraz je otázka kliknutia na prvok odseku, ktorá udalosť kliknutia prvku sa spracuje ako prvá.
Takže v bublanie, najprv sa spracuje udalosť prvku odseku a potom sa spracuje udalosť prvku div. Znamená to, že pri prebublávaní sa najskôr spracuje udalosť vnútorného prvku a potom sa spracuje udalosť vonkajšieho prvku.
In Zachytenie najprv sa spracuje udalosť prvku div a potom sa spracuje udalosť prvku odseku. Znamená to, že pri zachytávaní sa najskôr spracuje udalosť vonkajšieho prvku a potom sa spracuje udalosť najvnútornejšieho prvku.
modifikačné klávesy
addEventListener(event, function, useCapture);
Šírenie môžeme špecifikovať pomocou použite Capture parameter. Keď je nastavená na hodnotu false (čo je jej predvolená hodnota), potom udalosť používa šírenie bublania a keď je nastavená na hodnotu true, dochádza k šíreniu zachytávania.
Vieme pochopiť bublanie a zachytávanie pomocou ilustrácie.
Príklad
V tomto príklade sú dva prvky div. Môžeme vidieť efekt bublania na prvom prvku div a efekt zachytávania na druhom prvku div.
Keď dvakrát klikneme na prvok span prvého prvku div, udalosť prvku span sa spracuje ako prvá ako prvok div. To sa nazýva bublanie .
Keď však dvakrát klikneme na prvok span druhého prvku div, udalosť prvku div sa spracuje ako prvá ako prvok span. To sa nazýva zachytávanie .
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('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); Vyskúšajte to Výkon
Aby sme videli efekt, musíme dvakrát kliknúť na konkrétne prvky.