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
Spustelėjus nurodytą HTML mygtuką, išvestis bus -
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 dabarIšvestis
JavaScript kodo pavyzdžiai
Dabar, kai spustelėsime mygtuką, bus rodomas įspėjimas. Spustelėjus nurodytą HTML mygtuką, išvestis bus -
Kai išeiname iš įspėjimo, išvestis yra -
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 dabarIšvestis
Kai perkelsime žymeklį virš mygtuko, išvestis bus -
Spustelėjus mygtuką ir palikus žymeklį, išvestis bus -
istorija java
Į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('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);Išbandykite dabar
Išvestis
Norėdami pamatyti efektą, turime du kartus spustelėti konkrečius elementus.