The addEventListener() menetelmää käytetään tapahtumakäsittelijän liittämiseen tiettyyn elementtiin. Se ei ohita olemassa olevia tapahtumakäsittelijöitä. Tapahtumien sanotaan olevan olennainen osa JavaScriptiä. Verkkosivu vastaa tapahtuneen tapahtuman mukaan. Tapahtumat voivat olla käyttäjän luomia tai API:iden luomia. Tapahtuman kuuntelija on JavaScriptin toiminto, joka odottaa tapahtuman esiintymistä.
AddEventListener()-metodi on sisäänrakennettu funktio JavaScript . Voimme lisätä useita tapahtumakäsittelijöitä tiettyyn elementtiin ylikirjoittamatta olemassa olevia tapahtumakäsittelijöitä.
Syntaksi
element.addEventListener(event, function, useCapture);
Vaikka siinä on kolme parametria, parametrit tapahtuma ja toiminto ovat laajalti käytössä. Kolmas parametri on valinnainen määritettävä. Tämän funktion arvot määritellään seuraavasti.
Parametrien arvot
tapahtuma: Se on pakollinen parametri. Se voidaan määritellä merkkijonoksi, joka määrittää tapahtuman nimen.
Huomautus: Älä käytä mitään etuliitettä, kuten 'on', parametrin arvon kanssa. Käytä esimerkiksi 'click' sen sijaan, että käytät 'onclick'.
toiminto: Se on myös pakollinen parametri. Se on a JavaScript-toiminto joka reagoi tapahtumaan.
sql-lausekkeet
useCapture: Se on valinnainen parametri. Se on Boolen tyyppinen arvo, joka määrittää, suoritetaanko tapahtuma kuplitus- vai sieppausvaiheessa. Sen mahdolliset arvot ovat totta ja väärä . Kun se on tosi, tapahtumakäsittelijä suorittaa kaappausvaiheessa. Kun se on asetettu arvoon false, käsittelijä suorittaa kuplitusvaiheen. Sen oletusarvo on väärä .
Katsotaanpa joitain kuvia addEventListener()-menetelmän käytöstä.
Esimerkki
Se on yksinkertainen esimerkki addEventListener()-menetelmän käytöstä. Meidän on napsautettava annettua HTML-painike nähdäksesi vaikutuksen.
Esimerkki addEventListener()-metodista.
Napsauta seuraavaa painiketta nähdäksesi tehosteen.
Napsauta minua document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hei maailma' + '' + 'Tervetuloa javaTpoint.com-sivustoon'; }Testaa nyt
Lähtö
Kun napsautat annettua HTML-painiketta, tulos on -
Nyt seuraavassa esimerkissä näemme kuinka lisätä useita tapahtumia samaan elementtiin ilman olemassa olevien tapahtumien päällekirjoittamista.
js-asetuksen aikakatkaisu
Esimerkki
Tässä esimerkissä lisäämme useita tapahtumia samaan elementtiin.
Tämä on esimerkki useiden tapahtumien lisäämisestä samaan elementtiin.
imessage-pelejä Androidille
Napsauta seuraavaa painiketta nähdäksesi tehosteen.
Napsauta minua function fun() { alert('Tervetuloa javaTpoint.comiin'); } function fun1() { document.getElementById('para').innerHTML = 'Tämä on toinen funktio'; } function fun2() { document.getElementById('para1').innerHTML = 'Tämä on kolmas funktio'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('click', hauskaa); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Testaa nytLähtö
Nyt kun napsautamme painiketta, näkyviin tulee hälytys. Kun napsautat annettua HTML-painiketta, tulos on -
Kun poistumme hälytyksestä, tulos on -
Esimerkki
Tässä esimerkissä lisäämme useita erityyppisiä tapahtumia samaan elementtiin.
Tämä on esimerkki useiden erityyppisten tapahtumien lisäämisestä samaan elementtiin.
Napsauta seuraavaa painiketta nähdäksesi tehosteen.
Napsauta minua function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'keltainen'; btn.style.color = 'sininen'; } function fun1() { document.getElementById('para').innerHTML = 'Tämä on toinen funktio'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', hauskaa); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Testaa nytLähtö
kokoinen lateksifontti
Kun siirrämme osoittimen painikkeen päälle, tulos on -
Kun napsautat painiketta ja poistut kohdistimesta, tulos on -
Tapahtumien kuplittaminen tai tapahtumien tallentaminen
Nyt ymmärrämme JavaScriptin addEventListener(:n) kolmannen parametrin käytön, eli useCapture.
HTML DOM:ssa kuplii ja Sieppaus ovat kaksi tapaa tapahtua. Voimme ymmärtää nämä tavat ottamalla esimerkin.
Oletetaan, että meillä on div-elementti ja sen sisällä kappaleelementti, ja käytämme 'klikkaus' tapahtuma molemmille käyttäen addEventListener() menetelmä. Nyt kysymys on kappaleelementin napsauttamisesta, minkä elementin napsautustapahtuma käsitellään ensin.
Joten sisään kupliva, Kappaleelementin tapahtuma käsitellään ensin ja sitten div-elementin tapahtuma. Se tarkoittaa, että kuplituksessa käsitellään ensin sisemmän elementin tapahtuma ja sitten uloimman elementin tapahtuma.
Sisään Sieppaus div-elementin tapahtuma käsitellään ensin ja sitten kappaleelementin tapahtuma. Se tarkoittaa, että sieppauksessa käsitellään ensin ulomman elementin tapahtuma ja sitten sisimmän elementin tapahtuma.
Androidin kehittäjätilan sammuttaminen
addEventListener(event, function, useCapture);
Voimme määrittää leviämisen käyttämällä useCapture parametri. Kun arvoksi on asetettu epätosi (joka on sen oletusarvo), tapahtuma käyttää kuplivaa etenemistä, ja kun se on tosi, tapahtuu kaappauseteneminen.
Voimme ymmärtää kuplivaa ja vangitseminen käyttämällä kuvaa.
Esimerkki
Tässä esimerkissä on kaksi div-elementtiä. Voimme nähdä kuplivan vaikutuksen ensimmäisessä div-elementissä ja sieppausvaikutelman toisessa div-elementissä.
Kun tuplaklikkaamme ensimmäisen div-elementin span-elementtiä, span-elementin tapahtuma käsitellään ensin kuin div-elementti. Sitä kutsutaan kuplivaa .
Mutta kun tuplaklikkaamme toisen div-elementin span-elementtiä, div-elementin tapahtuma käsitellään ensin kuin span-elementti. Sitä kutsutaan vangitseminen .
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); Testaa nyt Lähtö
Meidän on kaksoisnapsautettava tiettyjä elementtejä nähdäksesi vaikutuksen.