Jquery - prelucrare eveniment, șef IT

În acest articol, considerăm metode care jQuery bibliotecă oferă un dezvoltator de web să se ocupe de evenimente.

Manipularea evenimente cu metode jQuery

Sintaxa pe

Înainte de a continua pentru a adăuga elemente de manipulare eveniment, trebuie să fie obținute aceste elemente. Aflați cum să găsiți elementele necesare de pe pagina poate fi în articolul jQuery - Selectarea elementelor.

În jQuery închide eveniment (eveniment ascultător) la un element specific, puteți utiliza pe una și funcțiile. și rezumatul se înregistrează pe.

O caracteristică este diferită de numai pe faptul că acesta îndeplinește handler atunci când are loc evenimentul specificat doar o singură dată.

De exemplu, adăugați o funcție pe eveniment click pentru toate elementele cu clasa de BTN:

Codul de mai sus scris folosind prescurtare de funcția:

Informații suplimentare despre eveniment

În procesarea evenimentului puteți afla unele mai multe informații despre el. Transferul acestor informații, și anume o tratare a evenimentului obiect Event este întotdeauna purtat de primul argument.

Spațiu de nume

În jQuery după specificând numele evenimentului, puteți specifica în continuare, opțional, un spațiu de nume.

spațiu de nume - un lucru foarte la îndemână. Este folosit, de exemplu, atunci când aveți nevoie pentru a apela, nu toate evenimentele, dar numai la un anumit nume.

De asemenea, cu ea este foarte ușor pentru a elimina anumite evenimente:

Descrierea și exemple de funcții de declanșare și sunt luate în considerare în articol de pe un pic mai mic.

Transmiterea datelor suplimentare în handler

Dacă este necesar, puteți transfera date de la tratare a evenimentului (specificând argumentul opțional asupra funcției). Accesul la datele transmise în cadrul procesorului prin intermediul obiectului evenimentului.

Acest lucru se face după cum urmează (exemplu):

Cum să stea câteva evenimente pe un singur element

Un exemplu de utilizare a unui procesor pentru multiple (două sau mai multe) de evenimente:

Fiecare eveniment are propria sa funcție:

Un exemplu de utilizare multiple în jQuery stivuitoare (funcție) pentru un singur eveniment:

De exemplu, să învețe eveniment va fi efectuată într-o ordine de prioritate poate fi după cum urmează:

apel eveniment Software

Pentru a apela la evenimentele din codul în jQuery sunt 2 metode:

• de declanșare - determină evenimentul specificat pentru elementul.
• triggerHandler - cauze de tratare a evenimentelor nu are loc în același timp, evenimentul în sine.

jQuery - eveniment de încărcare a paginii (gata)

Procesul de adăugare a unui element de tratare a evenimentelor se efectuează de obicei după încărcarea paginii, adică, când a construit arborele DOM a documentului. În caz contrar, atunci când scrieți un handler, puteți face referire la elementele care nu sunt deja în pagină.

Cele mai rapide evenimente de înregistrare în pagina de download jQuery arată astfel:

Dar, puteți utiliza o înregistrare lungă:

jQuery - Boot Eveniment (încărcare)

Browserul eveniment de sarcină generează un element atunci când el și toate elementele încorporate în ea au fost complet încărcate. Acest eveniment este doar pentru elementele în care există URL: imagine. script-ul. si fereastra iframe.

De exemplu, pentru a îndeplini o funcție atunci când pagina este complet încărcată (inclusiv imagini):

De exemplu, afișa un mesaj de la consola atunci când imaginea specificată va fi descărcată:

Evenimente mouse - jQuery

În jQuery pentru a urmări acțiunile mouse-ului sunt folosite cel mai des următoarele evenimente:

jQuery - Faceți clic pe eveniment (click)

Faceți clic pe eveniment este un eveniment complex, acesta se produce după generarea mousedown și MouseUp evenimente. eveniment mousedown are loc atunci când cursorul este deasupra elementului și se apasă un buton al mouse-ului. eveniment MouseUp apare atunci când cursorul este deasupra elementului și un buton al mouse-ului este eliberat. Faceți clic pe eveniment este generat atunci când cursorul este deasupra elementului și un buton al mouse-ului este apăsat și eliberat. Aceste evenimente pot primi orice elemente HTML.

De exemplu, închide un handler pentru evenimentul onclick element de fereastră. La apariția tratare a evenimentului va afișa numărul de tasta apăsată și coordonatele cursorului:

De exemplu, atârnă evenimentul onclick la toate elementele cu clasa BTN:

Evenimente prescurtare făcând clic pe:

De exemplu, vom explica modul în care să se ascundă a bloca ceva timp după clic eveniment:

jQuery - eveniment Hover (Hover)

jQuery - Care este evenimentul Hover

Doar prezenta evenimentul cursorul este complex și este format din 2 evenimente:

• intrarea (mouseenter, mouseover);
• de evacuare (mouseleave, mouseout).

Evenimente mouseenter și mouseleave în jQuery diferă de la mouse-over și mouseout numai în măsura în care nu apar atunci când cursorul respectiv intră și iese elementele interne ale elementului de ascultare. Cu alte cuvinte, mouseover și mouseout evenimente pop-up, și mouseenter și mouseleave - nr.

De exemplu, schimba culoarea unui element din listă atunci când cursorul la prezentarea la el:

Aceeași procedură, dar folosind mouseover și mouseout:

Aceste metode sunt utilizate în mod opțional împreună, ele pot fi de asemenea utilizate în mod individual.

De exemplu, numărul de numărul de vizite la elementul atunci când evenimentul „Bridging the mouse-ul“:

In loc de a folosi mouseenter și mouseleave puteți utiliza evenimentul Hover.

De exemplu, rescriem exemplul de mai sus, folosind planare:

Când se folosește un eveniment Hover în jQuery, primul procesor este utilizat pentru a specifica acțiuni la introducerea elementului cursor (mouseenter), iar al doilea - la ieșirea (mouseleave).

Dacă specificați un handler eveniment planare, acesta va fi efectuată pentru procesarea planare, și pentru evadarea ei.

mișcările mouse-ului Eveniment - jQuery

eveniment mousemove este trimis la un element atunci când cursorul se mișcă în interiorul acestuia. Orice element HTML poate primi acest eveniment.

jQuery - Eveniment roata mouse-ului (roți)

evenimente de ascultare rotiță de derulare (roata) mouse-ului poate fi efectuată după cum urmează:

Acest eveniment este în contrast pentru a derula browser-ul este generat numai pentru roata mouse-ului, indiferent dacă sunt sau nu elementul de derulare, adică, cu ea, puteți lucra mai departe cu elemente de preaplin. egal ascunse. O altă diferență constă în faptul că roata este generat pentru a derula și derula - după.

jQuery - Evenimente cheie

Când apăsați tastele de pe tastatură browser-ul generează evenimente în următoarea ordine:

• KeyDown (tasta este apăsată, dar care nu au fost încă lansat);
• Apăsare (eveniment este generat pentru litere, cifre și alte taste, cu excepția manageri) - este conceput pentru a obține codul de caractere (evenimente KeyDown și keyup permit să știi doar codul cheie, dar nu și caracterul);
• keyup (generate de browser atunci când o tastă este eliberată).

De exemplu, scrie un handler pentru a asculta toate evenimentele care au loc atunci când este apăsată o tastă:

Un exemplu care arată cum să asculte evenimentul keypress și pentru a afla dacă a spus combinație de taste:

Un exemplu de modul de a asculta combinația de taste Ctrl + Enter:

Un exemplu de utilizare a evenimentelor KeyDown și keyup:

jQuery - Evenimente formează elemente

În jQuery, puteți evidenția următoarele evenimente la elementele de formă și mai mult:

• focalizare (focusin)
• neclaritate (focusout)
• schimbare
• de intrare (pentru elementele de text formează)
• selecta
• prezenta

jQuery - Evenimente obtinerea si pierde concentrarea

eveniment Focus este trimis la un element atunci când primește focusul. Acest eveniment este generat pentru elementele de intrare. și selectați link-uri (a href = ""), precum și orice alte elemente care tabindex set de proprietate. Element de focalizare Pregătirea este de obicei realizată prin clic sau apăsând tasta Tab de pe tastatură. Focus eveniment nu fluctuează.

În plus, există un eveniment de focalizare similară, a numit-o focusin. Spre deosebire de evenimentul se concentreze se ridică, și poate fi utilizat, de exemplu, pentru a detecta un element părinte eveniment de focalizare.

Evenimentul blur este trimis la un element atunci când își pierde focalizarea. Precum și concentrarea. eveniment estompare are un focusout eveniment similar. Acest eveniment este diferit de neclaritatea, astfel încât să poată pluti. Această caracteristică poate fi utilizată, de exemplu, să-l obțină pe elementul părinte, nu numai pe elementul care a cauzat (țintă).

De exemplu, atunci când primesc evenimente de focalizare element de div îl va seta fundal portocaliu:

Exact același termen, cu ajutorul unor evenimente de focalizare și neclaritățile nu se dovedesc, din moment ce ei nu au venit:

jQuery - eveniment de modificare (schimbare)

Schimbarea eveniment este pentru înregistrarea elementelor de intrare valoare schimbare. textarea și selectați. Pentru articolele selectați. casetele de selectare. și butoane radio acest eveniment are loc imediat (de exemplu, de îndată ce utilizatorul face orice alegere). Dar acest eveniment nu va avea loc pentru alte elemente, atâta timp cât acest element nu-și pierde concentrarea.

Un exemplu de utilizare a evenimentului de schimbare pentru a monitoriza starea elementului caseta de validare. Butonul este disponibil va determina în funcție de ceea ce de stat (verificat sau nu) să fie verificate:

Un exemplu în care luăm în considerare modul de a selecta valoarea elementului atunci când se schimbă:

Un exemplu în care luăm în considerare modul de a selecta toate elementele selectate la schimbarea ei:

EXEMPLUL evenimente de modificare apel de software pentru a selecta elemente:

Exemplu evenimentului schimbării pentru modificarea valorilor elementelor de intrare:

Dar, în plus față de evenimente schimba au mai multe evenimente de intrare pentru elementele de text. Acest eveniment este în contrast cu schimbarea este generată imediat, în loc de după elementul pierde focalizarea.

Un exemplu de utilizare a evenimentului de intrare pentru a obține un element de intrare valoare:

Un exemplu în care arată o modalitate de obținere a elementului valori textarea:

Un exemplu în care considerăm modul de utilizare a evenimentelor de schimbare pentru a obține valoarea elementului selectat din tipul de intrare. egală cu radio:

jQuery - selecție de evenimente (selectați)

selectați evenimentul de selecție este generat de browser atunci când utilizatorul se află în interiorul elementelor de intrare cu tipul = „text“ și textarea selectează textul.

jQuery - Eveniment depune formularul (submit)

să prezinte evenimentul are loc în elementul atunci când utilizatorul încearcă să trimită formularul. Acest eveniment poate fi adăugat numai elementele formei.

Un exemplu de utilizare a evenimentelor să prezinte:

Provocarea software depune formularul:

jQuery - eveniment de defilare (scroll)

Pentru a urmări starea sulul este utilizat în caz de defilare jQuery.

De exemplu, atârnă pe funcția de evenimentul de pe pagina de parcurgere care se va afișa elementul cu clasa scrollup. în cazul în care valoarea este mai mare decât 200px parcurgere și ascunde în cazul în care sulul este mai mică decât această valoare.

jQuery - fereastra Event redimensionarea (redimensionare)

Pentru a asculta evenimentul browser-ul fereastră schimbare se utilizează redimensionare:

De exemplu, creați un handler care se va schimba atunci când fereastra browser-ului pentru a afișa pagina la sfârșitul lățimea și înălțimea:

jQuery - Anularea comportamentul implicit al evenimentelor

De exemplu, pentru a trece peste comportamentul normal al tuturor link-uri de pe un serviciu de clasă pagină cu:

Ce suprafață și cum să-l oprească

jQuery - Cum metoda stopPropagation

În plus față de eliminarea acțiunii standardului, mecanismul evenimentului există un astfel de lucru ca ascensiune. Acesta se află în faptul că, atunci când browser-ul generează un eveniment, nu numai pentru elementul curent (țintă), ci și pentru toți descendenții săi, inclusiv părinte:

În jQuery există scenarii în care prezentate în cadrul lanțului de la orice element au același handler pentru acest eveniment, care nu este necesară. Și la acest eveniment nu se va răspândi la acest articol, acesta trebuie să fie oprit. În acest scop, handler element necesar trebuie să apeleze obiect eveniment stopPropagation. După apelarea acestei metode, evenimentul se va opri și nu va pluti.

De exemplu, este necesar să se prezinte accesul pointer la un element cu o marcă de clasă. conținutul său a devenit portocaliu.

În acest caz, dacă nu specificați metoda stopPropagation. Prezentati cursorul la elementul interval cu o marcă de clasă acest eveniment are loc nu numai el, ci și toți strămoșii săi. Și este în acest exemplu va determina ca schimbarea de culoare nu este numai textul în interval. dar, de asemenea, la întregul paragraf.

Dacă aveți nevoie pentru a anula comportamentul implicit al browser-ului și a opri evenimentele de ascensiune în jQuery în loc de asteptare aceste două metode, vă puteți întoarce la fel, ca urmare a funcției este falsă.

Adăugarea de evenimente la obiectele create dinamic

Pentru a închide evenimentul pe un element, care nu este încă, puteți utiliza următoarea structură asupra funcției:

Această acțiune poate fi realizată datorită faptului că evenimentul apare și, prin urmare, există toate strămoșii acestui element. Un obiectiv este deschis pentru fiecare eveniment de pe pagina este un document. Prin urmare, în cele mai multe cazuri, pentru a alege exact. După știind acest selector, pe funcția de software-ul poate fi selectat dintre elementele (elementul care a declanșat evenimentul (țintă) și toate strămoșii săi, inclusiv părinții) sunt cele care corespund acestuia. Și apoi pentru toate elementele selectate îndeplini funcțiile specificate în handler pe. Acțiunile prin care evenimentul este transferat într-un alt element de procesare (strămoș) este numit în jQuery More procesul de delegare eveniment.

De exemplu, adăugați un eveniment la elementul, care nu are încă pe pagina:

Delegarea poate fi utilizată nu numai pentru manipularea obiectelor create dinamic eveniment, dar nu pentru a fi legat de fiecare element (în cazul în care o pagină poate fi foarte mult) handler.

jQuery - Scoateți de tratare a evenimentelor

Eliminarea manipulare eveniment prin utilizarea metodei off. Astfel, prin aceasta numai acele manipulare pot fi îndepărtate prin metoda sunt adăugate pe.

Call off metoda fără argumente elimină toate aceste elemente au adăugat pentru a le manipulare eveniment.

De exemplu, dezactivați toate manipulatorii din elementele cu un link de clasă:

De exemplu, eliminați evenimentul click pentru toate elementele cu link-ul de clasă:

Selector speciale (**) permite numai să eliminați evenimentele delegate de conservare nu delega:

Eliminați numai evenimentele delegate specificate (folosind un selector)

Eliminați toate stivuitoare openModal delegate evenimentul clic în spațiul de nume modale pentru elementele cu clasa de spectacol:

Creați un eveniment personalizat

Pentru a crea evenimente personalizate in metode jQuery sunt folosite pe și de declanșare.

Principiul de a crea un eveniment special jQuery ia în considerare următoarele exemple: