logo

TechCodeview

JavaScript addEventListener()

The addEventListener() metodas naudojamas įvykių tvarkyklei prijungti prie konkretaus elemento. Tai nepaiso esamų įvykių tvarkyklių. Teigiama, kad įvykiai yra esminė JavaScript dalis. Tinklalapis reaguoja pagal įvykusį įvykį. Įvykiai gali būti sukurti naudotojo arba sugeneruoti API. Įvykių klausytojas yra „JavaScript“ procedūra, kuri laukia įvykio įvykio.

Metodas addEventListener() yra integruota funkcija JavaScript . Prie konkretaus elemento galime pridėti kelias įvykių tvarkykles neperrašydami esamų įvykių tvarkyklių.

Sintaksė

 element.addEventListener(event, function, useCapture);

Nors jis turi tris parametrus, parametrus įvykis ir funkcija yra plačiai naudojami. Trečiasis parametras yra neprivalomas. Šios funkcijos reikšmės apibrėžiamos taip.

Parametrų reikšmės

įvykis: Tai būtinas parametras. Jis gali būti apibrėžtas kaip eilutė, nurodanti įvykio pavadinimą.

Pastaba: su parametro verte nenaudokite priešdėlio, pvz., „on“. Pavyzdžiui, naudokite „click“, o ne „onclick“.

funkcija: Tai taip pat būtinas parametras. Tai yra JavaScript funkcija kuris reaguoja į įvykį įvyksta.

json json pavyzdyje

useCapture: Tai neprivalomas parametras. Tai Būlio tipo reikšmė, nurodanti, ar įvykis vykdomas burbuliavimo ar fiksavimo fazėje. Galimos jo vertės yra tiesa ir klaidinga . Kai jis nustatytas į „true“, įvykių tvarkytojas vykdo fiksavimo fazėje. Kai jis nustatytas į false, tvarkytojas vykdo burbuliavimo fazėje. Jo numatytoji reikšmė yra klaidinga .

Pažiūrėkime keletą iliustracijų, kaip naudoti metodą addEventListener().

Pavyzdys

Tai paprastas addEventListener() metodo naudojimo pavyzdys. Turime spustelėti duotą HTML mygtukas norėdami pamatyti efektą.

amplitudės moduliacija

AddEventListener() metodo pavyzdys.

Spustelėkite šį mygtuką, kad pamatytumėte efektą.

Spustelėkite mane document.getElementById('btn').addEventListener('spustelėkite', smagu); function fun() { document.getElementById('para').innerHTML = 'Sveikas, pasauli' + '
' + 'Sveiki atvykę į javaTpoint.com'; }Išbandykite dabar

Išvestis

JavaScript addEventListener()

Spustelėjus nurodytą HTML mygtuką, išvestis bus -

JavaScript addEventListener()

Dabar kitame pavyzdyje pamatysime, kaip prie to paties elemento pridėti daug įvykių neperrašant esamų įvykių.

Pavyzdys

Šiame pavyzdyje prie to paties elemento pridedame kelis įvykius.

Tai kelių įvykių pridėjimo prie to paties elemento pavyzdys.

Spustelėkite šį mygtuką, kad pamatytumėte efektą.

Spustelėkite mane function fun() { alert('Sveiki atvykę į javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Tai antroji funkcija'; } function fun2() { document.getElementById('para1').innerHTML = 'Tai trečioji funkcija'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('spustelėkite', smagu); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Išbandykite dabar

Išvestis

JavaScript kodo pavyzdžiai
JavaScript addEventListener()

Dabar, kai spustelėsime mygtuką, bus rodomas įspėjimas. Spustelėjus nurodytą HTML mygtuką, išvestis bus -

JavaScript addEventListener()

Kai išeiname iš įspėjimo, išvestis yra -

JavaScript addEventListener()

Pavyzdys

Šiame pavyzdyje prie to paties elemento pridedame kelis skirtingo tipo įvykius.

Tai kelių skirtingų tipų įvykių įtraukimo į tą patį elementą pavyzdys.

Spustelėkite šį mygtuką, kad pamatytumėte efektą.

Spustelėkite mane function fun() { btn.style.width = '50px'; btn.style.height = '50 piks.'; btn.style.background = 'geltona'; btn.style.color = 'mėlyna'; } function fun1() { document.getElementById('para').innerHTML = 'Tai antroji funkcija'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('užveskite pelės žymeklį', smagu); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Išbandykite dabar

Išvestis

JavaScript addEventListener()

Kai perkelsime žymeklį virš mygtuko, išvestis bus -

JavaScript addEventListener()

Spustelėjus mygtuką ir palikus žymeklį, išvestis bus -

istorija java
JavaScript addEventListener()

Įvykių burbuliavimas arba įvykių fiksavimas

Dabar suprantame, kaip naudojamas trečiasis JavaScript addEventListener() parametras, t.y. useCapture.

HTML DOM, Burbuliuoja ir Užfiksavimas yra du įvykių plitimo būdai. Šiuos būdus galime suprasti imdami pavyzdį.

Tarkime, kad jame yra elementas div ir pastraipos elementas, ir mes taikome 'spustelėkite' įvykis abiems naudojant addEventListener() metodas. Dabar kyla klausimas, kaip spustelėti pastraipos elementą, kurio elemento paspaudimo įvykis tvarkomas pirmiausia.

Taigi, į burbuliuojantis, pirmiausia apdorojamas pastraipos elemento įvykis, o tada – div elemento įvykis. Tai reiškia, kad burbuliuojant pirmiausia apdorojamas vidinio elemento įvykis, o tada – tolimiausio elemento įvykis.

Į Užfiksavimas pirmiausia apdorojamas elemento div įvykis, o tada – pastraipos elemento įvykis. Tai reiškia, kad fiksuojant pirmiausia tvarkomas išorinio elemento įvykis, o tada bus tvarkomas vidinio elemento įvykis.

Kaip skaityti csv failą java 
 addEventListener(event, function, useCapture);

Mes galime nurodyti sklidimą naudodami useCapture parametras. Kai jis nustatytas į false (tai yra numatytoji reikšmė), įvykis naudoja burbuliuojantį sklidimą, o kai nustatyta į true, yra fiksavimo sklidimas.

Mes galime suprasti burbuliuojantis ir gaudymas naudojant iliustraciją.

Pavyzdys

Šiame pavyzdyje yra du div elementai. Matome burbuliavimo efektą pirmame div elemente ir fiksavimo efektą antrajam div elementui.

Kai du kartus spustelėjame pirmojo div elemento span elementą, span elemento įvykis apdorojamas pirmiausia nei div elementas. Tai vadinama burbuliuojantis .

Bet kai du kartus spustelėjame antrojo div elemento span elementą, tada elemento div įvykis apdorojamas pirmiausia nei span elementas. Tai vadinama gaudymas .

 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);
Išbandykite dabar

Išvestis

JavaScript addEventListener()

Norėdami pamatyti efektą, turime du kartus spustelėti konkrečius elementus.