Įvykių tvarkymas yra svarbi „JavaScript“ koncepcija. Įvykiai leidžia HTML puslapiams būti dinamiškiems ir interaktyviems, todėl galite sukurti patrauklias vartotojo sąsajas. Galite parašyti kodą, kad paleistumėte „JavaScript“, kai įvyksta DOM.
Įvykis gali būti tada, kai vartotojas spustelėja HTML elementą, įkeliamas puslapis arba pasikeičia įvesties lauko reikšmė. Galite parašyti kodą, kuris keičia HTML struktūrą įvykus įvykiui. Sužinokite tris skirtingus būdus, kaip prie kodo pridėti įvykių klausytojų.
1. AddEventListener metodas
AddEventListener metodas yra vienas iš populiariausių įvykių klausytojo metodai. Jis turi tris parametrus:
- Objektas, vaizduojantis įvykį.
- Funkcija ją valdyti.
- Pasirenkama loginė reikšmė useCapture, kuri aprašo, kaip įvykis plinta visame DOM.
Įvykis gali būti bet koks nurodytas DOM įvykis tiksliniame elemente. Funkcija yra nustatyta taip, kad reaguotų į tą įvykį, kai jis įvyksta.
Funkcija gali būti anoniminė arba pavadinta funkcija. Populiariausi taikiniai yra elementas, jo vaikai, dokumentas ir langas, palaikantis įvykį.
„AddEventListener()“ yra rekomenduojamas „JavaScript“ įvykių klausytojų administravimo metodas. Jis veikia su bet kokiu įvykio tikslu, ne tik HTML elementais, ir palaiko kelias įvykių tvarkykles.
Galbūt norėsite atlikti tam tikrą kodą DOM. Galite spausdinti tekstą, atlikti skaičiavimus arba rodyti vaizdą, kai vartotojas spustelėja mygtuką.
Iliustruojame tokiu kodu:
html>
<html>
<kūnas>
<h1>„AddEventListener“ metodas su funkcijomish1>
<mygtukąid="myBtn">Paspauskite čiamygtuką>
<pid="demo">p>
kūnas>
html>Tada naudodami mygtuką pridėkite įvykių klausytoją.
konst elementas = dokumentas.getElementById("myBtn");
element.addEventListener("spausti", myFunction1);
funkcijamano funkcija1() {
dokumentas.getElementById("demo").innerHTML += „Funkcija įvykdyta! "
}
Spustelėjus mygtuką, ekrane išspausdinamas tekstas „Funkcija įvykdyta“, kaip parodyta toliau.
2. Įvykių perdavimas „addEventListener“.
Įvykio delegavimas „JavaScript“ yra šablonas, naudojamas keliems įvykiams tvarkyti. Užuot pridėję įvykių klausytoją prie kiekvieno elemento, pridedate tik įvykių klausytoją prie protėvio elemento. Elementą, kuris suaktyvino įvykį, galite pasiekti naudodami .taikinys renginio objekto nuosavybė.
Taip užtikrinama, kad visi elementai, į kuriuos taikote, elgsis taip pat. Be jo turėtumėte rankiniu būdu pridėti įvykių klausytoją prie kiekvieno.
Štai renginio delegavimo pavyzdys:
html>
<html>
<kūnas>
<h1> Renginio delegacija ant mygtukųh1>
<div>
<mygtuką>1 mygtukasmygtuką>
<mygtuką>2 mygtukasmygtuką>
<mygtuką>3 mygtukasmygtuką>
div>
kūnas>
html>
Tada pridėkite įvykių klausytojus prie visų mygtukų naudodami tik kelias kodo eilutes.
konst div = dokumentas.querySelector("div")div.addEventListener("spausti", (įvykis) => {
jeigu (event.target.tagName "BUTTON") {
konsolė.log("mygtukas paspaustas")
}
});
Įvykio delegavimas yra šablonas, pagrįstas įvykių burbuliavimu. Įvykių burbuliavimas įvyksta, kai elementas gauna įvykį ir perduoda jį pirminiams ir pirminiams elementams DOM. Tai yra įvykių propagavimas koncepcija, kuri vyksta pagal numatytuosius nustatymus „JavaScript“.
3. Naudojant onclick atributą
Galite naudoti atributą onclick, kad paleistumėte „JavaScript“, kai naudotojai spustelėja elementą. Kaip ir addEventListener metodą, galite naudoti onclick metodą teksto spausdinimui, skaičiavimams ir elementų funkcijų keitimui DOM.
Galite pridėti onclick įvykių klausytoją kaip tiesioginę įvykių tvarkyklę prie HTML elemento. Įvykis įvyksta, kai vartotojas spusteli elementą. Dinamiškai keiskite šios pastraipos spalvą naudodami onclick metodą:
html>
<html>
<kūnas>
<h1> Vykdykite onClick Eventsh1>
<pid="demo"paspaudus="myFunction()">
Spustelėkite mane, kad pakeistumėte teksto spalvą.
p>
kūnas>
html>„JavaScript“ faile pridėkite šį kodą:
funkcijamyFunction() {
dokumentas.getElementById("demo").stilius.spalva = "raudona";
}Išvestis pasirodys kaip parodyta:
Kodėl verta sužinoti apie įvykių klausytojus?
Kaip „JavaScript“ kūrėjas, projektuose dažnai naudosite įvykių klausytojus. Naudodami įvykių klausytojus galite sukurti daugybę funkcijų, įskaitant burbuliavimą ir įvykių fiksavimą. Suprasdami šias sąvokas galėsite lengviau kurti dinamines sąsajas savo programose.
