logo

JavaScript addEventListener()

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ö

JavaScript addEventListener()

Kun napsautat annettua HTML-painiketta, tulos on -

JavaScript addEventListener()

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 nyt

Lähtö

JavaScript addEventListener()

Nyt kun napsautamme painiketta, näkyviin tulee hälytys. Kun napsautat annettua HTML-painiketta, tulos on -

JavaScript addEventListener()

Kun poistumme hälytyksestä, tulos on -

JavaScript addEventListener()

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 nyt

Lähtö

kokoinen lateksifontti
JavaScript addEventListener()

Kun siirrämme osoittimen painikkeen päälle, tulos on -

JavaScript addEventListener()

Kun napsautat painiketta ja poistut kohdistimesta, tulos on -

JavaScript addEventListener()

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(&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); 
Testaa nyt

Lähtö

JavaScript addEventListener()

Meidän on kaksoisnapsautettava tiettyjä elementtejä nähdäksesi vaikutuksen.