Gestionarea evenimentelor este un alt motiv important pentru a utiliza jQuery. Există câteva diferențe între browser-uri în ceea ce privește modalitatea de a face, care jQuery se normalizează într-un singur API simplu, aplicând în același timp unele bune practici.
În esență, trebuie să știți o metodă: .on()- funcționează astfel:
$("button").on("click", function() ( // do something ));Aici dăm .on()metodei doar doi parametri. Numele evenimentului („clic”) și o funcție de rulat atunci când acel eveniment se întâmplă pe oricare dintre elementele din acea selecție. Citește destul de curat, nu-i așa?
Persoanele cu o anumită experiență anterioară jQuery ar putea fi familiarizați cu alte metode de legare ca .bind(), .live()sau .delegate(). Nu vă mai faceți griji cu privire la acestea, jQuery modern le-a combinat pe toate în .on()care face întotdeauna cea mai bună practică.
Când legați un eveniment așa cum am făcut mai sus, puteți (și este de obicei inteligent să) includeți un nume de parametru în funcție. Acest parametru va fi „obiectul evenimentului” din interiorul funcției:
$("button").on("click", function(event) ( // event => "the event object" ));Prin acel obiect de eveniment obțineți multe informații. Sunteți deja puțin familiarizați cu el, pentru că am obișnuit-o .preventDefault()și .stopPropagation(). Dar există, de asemenea, o mulțime de alte informații directe în acel obiect. Lucruri cum ar fi ce tip de eveniment a fost (în cazul în care mai multe evenimente declanșează aceeași funcție), când s-a întâmplat, unde s-a întâmplat (coordonate, dacă este cazul), ce element s-a întâmplat și multe altele. Merită să inspectați în mod regulat obiectul evenimentului atunci când codificați.
Există un concept de delegare de evenimente care este extrem de important în lucrul cu evenimente. Este o practică modernă foarte inteligentă din zilele noastre. Incorporează ideea de anvergură.
O modalitate tradițională de a vă gândi la legarea evenimentelor este ca „găsiți toate butoanele de pe pagină și legați un eveniment de clic la acestea”. Desigur, asta funcționează, dar este:
- Nu foarte eficient
- Fragil
Nu este eficient, deoarece forțezi imediat JavaScript să găsească toate acele elemente de buton atunci când, cu delegare, ai putea găsi doar un element mai ușor de găsit.
Fragile, deoarece dacă mai multe butoane sunt adăugate la pagină, au ratat deja barca de pe legătură și vor trebui să fie reluate din nou.
Cu delegarea evenimentului, ați lega acel eveniment de clic la un element care este mai sus în arborele DOM decât butoanele care se întâmplă să le conțină pe toate. Ar putea fi undeva, ar putea fi el documentînsuși. Când legați evenimentul de clic de acel element de sus, îi spuneți că sunteți încă interesat doar de clicurile care au avut loc pe butoane. Apoi, când se face clic pe un buton, prin natura clocotirii evenimentului, acel clic se va declanșa în cele din urmă pe elementul de sus. Dar obiectul evenimentului va ști dacă clicul inițial s-a întâmplat pe un buton sau nu, iar funcția pe care ați setat-o să se declanșeze în acel eveniment va fi declanșată sau nu va fi declanșată știind aceste informații.
În acest screencast, demonstrăm că așa:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Acum imaginați-vă dacă am adăuga altul la asta . Nu este nevoie să re-legăm niciun eveniment, deoarece evenimentul este încă fericit legat de sfera de acțiune și evenimentele vor continua să apară din noua zonă de text adăugată. Acest lucru este deosebit de util în mediile de aplicații web în care adăugați în mod regulat elemente noi pe pagină.
Un alt lucru bun de știut despre legarea evenimentelor jQuery este că nu se exclud reciproc. Dacă adăugați un alt handler de clicuri la același element exact care are deja unul, acesta va adăuga altul. Nu îl suprascrieți pe cel precedent. jQuery tratează acest lucru destul de grațios pentru dvs. Puteți oricând să le legați dacă ați dorit într-adevăr să suprascrieți o funcție legată anterior.
Dacă este același eveniment exact, merită să știți că, pentru a dezlega unul specific dintre ele și nu pe celălalt, va trebui să denumiți evenimentele. Acest lucru se întâmplă prin utilizarea unui punct în numele evenimentului, cum ar fi click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), așa cum nu am menționat până acum, este modul în care dezlegați evenimentele.
Există o mulțime de evenimente DOM posibile. Clicul este cel mai important lucru evident, dar există dublu clic, mouse-ul și mouse-ul, tastarea și tastarea, formează altele specifice, cum ar fi estompare și schimbare și multe altele. Dacă sunteți interesat de lista completă, puteți obține una ca aceasta.
Puteți lega mai multe evenimente în același timp astfel:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Există unele circumstanțe în care așteptați să se întâmple un eveniment, dar odată ce se întâmplă, nu vă mai pasă de el sau în mod explicit nu mai doriți să declanșați funcția pe care o legați. Despre asta .one()este funcția. Un caz de utilizare standard pentru acest lucru este un buton de trimitere a formularului (dacă vă ocupați de Ajax sau orice altceva). Probabil că doriți să dezactivați în mod esențial butonul de trimitere după ce l-au apăsat până când puteți procesa aceste informații și le puteți oferi feedback-ul adecvat. Acesta nu este singurul caz de utilizare, desigur, dar țineți cont de asta. .one()== doar o singură dată.