De ce avem nevoie de evenimente în general? Când vrem să executăm un anumit cod atunci când facem clic pe un element, fie când plasăm mouse-ul peste mouse, fie când ne concentrăm, atunci avem nevoie de evenimente. Asta este, am atârnă clientul pe elementul DOM și se blochează acolo. De asemenea, așteaptă, când vom face așa. De exemplu, atunci când faceți clic pe element. Și apoi îndeplinește această funcție.
Constrângerea evenimentelor utilizând html este greșită și nu este flexibilă. Este mult mai bine să folosiți o metodă specială pentru acest lucru. Aceasta este metoda addEventListener.
Să eliminăm atributul onclick de pe butonul nostru și să adăugăm clasa de schimbare la acesta
Dar acum ne vom confrunta cu o nuanță. Să încercăm să găsim un buton în fișierul nostru și să îl terminăm
Acum, dacă privim în browser, elementul nostru este eliminat și putem lucra cu acesta. Să închidem un ascultător pe butonul nostru.
Să scriem elementul nostru DOM la o variabilă și să adăugăm addEventListener. Aceasta este funcția care ia primul parametru ca nume de eveniment, în cazul nostru click și al doilea parametru este funcția care va fi executată când dăm clic.
Dacă ne uităm la browser, atunci când am dat click, consola.logul nostru a fost afișat.
Și în acest fel, puteți atârna cât mai mulți agenți care vă doresc. De exemplu, să adăugăm un alt ascultător.
Să scriem acum un mic exemplu. Vrem să creăm 2 elemente și atunci când plasăm cursorul pe prima, dorim să arătăm al doilea element.
Să adăugăm 2 elemente la pagină și să le adăugăm clase. Al doilea element este ascuns prin scrierea afișării inline: niciuna. Desigur, ar fi mai bine să scrieți stilurile într-un fișier css separat, dar pentru un exemplu mic, puteți face acest lucru.
Și am pus pe primul element 2 evenimente: mouseover și mouseout. Aceasta înseamnă că primul va avea loc când treceți peste element și al doilea când cursorul va părăsi elementul.
Dacă ne uităm în browser, atunci când hovering și hovering cursorul, console.log este afișat.
Acum, să adăugăm al doilea element de afișare: bloc și dacă mutați cursorul pentru a afișa: nici unul
Dacă privim în browser, atunci atunci când indicați primul element, afișăm cel de-al doilea element, iar când mutați cursorul, acesta dispare.
Articole similare
-
Spațiul evenimentelor elementare, matematica superioară - este mai ușor!
-
Cinci cele mai bune evenimente de hochei din istoria confruntării dintre Rusia și Canada
Trimiteți-le prietenilor: