Evenimentele din JS pot fi împărțite în 4 grupe mari:
Interfața UI: declanșată atunci când utilizatorul interacționează cu browserul UI (butoanele din jurul paginii web făcând parte din interfața browserului). Aceste evenimente pot include și acele acțiuni pe care pagina le efectuează independent de utilizator. Astfel de evenimente includ modificarea dimensiunii ferestrei, derularea paginii, încărcarea și descărcarea conținutului.
Tastatură, mouse și ecran tactil: declanșat când utilizatorul apasă sau eliberează butoanele de pe tastatură, controlează mouse-ul, trackpad-ul sau funcționează cu ecranul tactil.
Concentrați evenimentele și cotele. În cea mai mare parte, ele sunt asociate cu formulare: câmpul de intrare "se concentrează" atunci când utilizatorul este gata să interacționeze cu acesta. Alte evenimente urmăresc transferul formularului, modificarea valorilor câmpurilor de formular etc.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Evenimente de mutare și observatori. Elementele mutante sunt urmărite atunci când structura DOM este schimbată: de exemplu, atunci când elementele de pe o pagină sunt inserate sau șterse folosind un script.
Legarea unui manipulator de evenimente
Un cod special care va declanșa numai pentru un anumit element DOM creează un handler de evenimente. În JS, există trei modalități de a crea un handler de evenimente:
1. Un manipulator standard de evenimente HTML prin atribute
Cea mai veche metodă de legare a evenimentelor, una dintre cele mai întâlnite până acum. Metoda utilizează atribute speciale în marcare. De exemplu:
În exemplul de mai sus, după ce câmpul primește focalizare și utilizatorul trece în câmpul următor (de exemplu, folosind TAB sau un clic normal), elementul va apela funcția checkName, care este scrisă în JS.
Managerii standard de evenimente HTML nu sunt recomandați pentru utilizarea în dezvoltarea modernă, în principal datorită faptului că funcționalitatea este amestecată cu marcarea, ceea ce complică munca și depanarea codului.
2. Handlers de evenimente standard în DOM
Această tehnică separă JS și marcarea, dar are aceeași limitare - evenimentelor i se poate atribui doar o funcție. HTML-ul echivalent al handler-ului de evenimente din DOM va fi:
Ca și în exemplul anterior, funcția checkName este rulată după ce elementul de formă pierde focalizarea.
3. Ascultători de evenimente
O metodă modernă de adăugare a unui handler de evenimente, permițându-vă să vă lipiți de mai multe evenimente și funcții:
O valoare booleană la sfârșit indică dacă să capteze evenimentul. De obicei este setat la fals. În scenariile simple, un eveniment este adesea scris sub forma unei funcții anonime:
Nu toate evenimentele sunt egale
Este important să înțelegem că nu toate evenimentele pot fi tratate în același mod. Derulați și redimensionați evenimentele sunt difuzate foarte des, de aceea trebuie să lucrați cu atenție cu ei, pentru a nu reduce viteza scenariului. Același lucru este valabil și pentru evenimente aparent inofensive de intrare de tip. Performanța scenariului poate fi foarte mare dacă încearcă să reacționeze în mod constant la evenimentul de intrare adesea declanșat de la glisorul range.
Nu toate evenimentele sunt urmărite
Observatorii pentru mutații nu pot urmări toate modificările din toate elementele de pe pagină. De exemplu, nu există nici o modalitate de a urmări schimbarea înălțimii unui element (atunci când containerul este restrâns în designul adaptiv, textul din interiorul acestuia este reconstruit și elementele devin mai lungi). Cu toate acestea, există modalități de urmărire a modificărilor, voi discuta acest lucru în următorul articol.
Atașați evenimentele la elementele corecte
Ediție: Comanda webformself.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
Trimiteți-le prietenilor: