✅ Gestionarea evenimentelor cu jQuery

Cuprins

Te-a ajutat acest tutorial?

evenimente sunt situații care apar în documentul nostru HTML, poate fi declanșat de situații ale sistemului în sine sau de acțiunile utilizatorului. În ambele cazuri, atunci când apare un eveniment, este posibil să faceți o post-procesare folosind jQuery, astfel încât să putem obține efecte mai bune în programele noastre.
Acest lucru este extrem de important, deoarece cunoașterea acestui aspect și cu ajutorul cadrului putem oferi paginilor și aplicațiilor noastre web mai mult dinamism.
Acesta este primul lucru la care ar trebui să răspundem atunci când lucrăm cu evenimente în jQueryAm spus deja că evenimentele sunt acțiuni sau situații care sunt declanșate de sistem sau de utilizator, de exemplu, când documentul este terminat de încărcare, sistemul declanșează evenimentul gata sau gata, atunci când un utilizator face clic pe un element este declanșat un eveniment omonim.
Având în vedere aceste mici exemple, putem vedea apoi sintaxa de bază pentru a gestiona orice tip de eveniment, care este următorul:

$ (selector) .on ("evenimentNume", funcție () {….})

Să ne amintim sau să clarificăm că selectorul este numele cu care vom localiza elementul din documentul nostru, apoi cu ajutorul metodei .pe () Apoi îi putem spune pentru ce eveniment ar trebui să asculte și când îl detectează poate executa o funcție anonimă în secțiunea noastră de script din HTML.
Ceva interesant pe care îl putem evidenția este că putem folosi un handler pentru diverse evenimenteCu alte cuvinte, putem efectua aceeași acțiune pentru mai multe situații, trebuie doar să enumerăm diferitele evenimente care trebuie ascultate, sintaxa este foarte asemănătoare cu cea pe care tocmai am văzut-o.
$ (selector) .on ("nume-eveniment1 nume-eveniment2 nume-eveniment3 ….", funcție () {….})
Deoarece știm cele mai de bază, trebuie să începem să știm și asta jQuery Ne va face întotdeauna viața mai ușoară ca dezvoltatori, așa că a oferit câteva comenzi rapide pentru a crea gestionare de evenimente, cu aceasta nu trebuie să facem declarația completă așa cum am văzut în partea anterioară, dar aplicăm aceste comenzi rapide direct la selector.
Să vedem câteva dintre cele mai interesante comenzi rapide folosite de dezvoltatori, trebuie remarcat faptul că nu este lista completă a celor disponibile, pentru a obține această listă este mai bine să mergeți direct la documentația oficială, totuși să începeți puțin pe subiect, acestea sunt mai mult decât suficiente.
gata ()Se execută atunci când toate elementele documentului SOARE acestea sunt încărcate, adică atunci când site-ul este gata, de unde și numele său. Trebuie remarcat faptul că acesta este un eveniment de sistem.
Trimite ()Se întâmplă când facem un depunerea formularuluiInteresant este că atunci când apare formularul, acesta nu trimite în mod tradițional, ci mai degrabă așteaptă ceea ce îi spune acest eveniment, deci îl putem folosi ca punct intermediar pentru validările câmpului pentru a menționa un exemplu de utilizare a acestuia.
click ()Se execută atunci când utilizatorul o face clic cu indicatorul mouse-ului peste un element, acesta poate fi dintr-un câmp de tip de intrare, pentru a include elemente precum sau ancorele . Cum am putea spune este un eveniment declanșat de utilizator.
blur ()Se întâmplă atunci când elementul pe care ne aflăm în acest moment nu este focalizat, de exemplu, scriem într-un câmp text și mergem la un câmp următor, în acest caz primul câmp a pierdut focalizarea și acest eveniment este executat.
focus ()Spre deosebire de evenimentul anterior, acest lucru se întâmplă exact atunci când ne concentrăm pe un element.
pluteste ()Acest eveniment se întâmplă atunci când trecem cursorul mouse-ului peste un element al SOARE, se poate aplica de obicei la și ancore .
Selectați ()Apare atunci când selectăm un element dintr-un câmp SelectațiDe exemplu, avem o listă verticală și alegem un articol din conținutul său.
Schimbare ()Apare atunci când valoarea sau starea unui element se schimbă, de exemplu într-un câmp Selectați, când schimbăm opțiunea pe care o vedem reflectată acolo.
Din moment ce știm puțin despre cele mai utilizate evenimente, vom genera un mic document care le pune în practică pe unele dintre ele, fie în sintaxa lor completă, fie cu exemple, astfel încât să putem experimenta ambele forme.
În următorul cod vom vedea cum inițial vom scrie cu console.log () când avem documentul în gata (), atunci vom aplica un alt mesaj atunci când trecem mouse-ul peste un pentru a confirma cum funcționează planare, în cele din urmă vom vedea cum să folosim click () Da focus () pentru a afișa alte mesaje. Să ne uităm la codul care descrie cele de mai sus:

 Exemplu de eveniment 1
Treci peste acest Div !!

Scrie ceva aici:
Concentrează-te la mine:
$ (document) .ready (function () {console.log ("Evenimentul gata s-a întâmplat !!");}); $ ("# hover event"). hover (function () {console.log ("Hover event s-a întâmplat!");}); $ („# Eveniment Click”). Clic (funcție () {console.log („am declanșat un eveniment Click MARI
Acest lucru se întâmplă atunci când dorim ca un element să aibă diferite evenimente asociate, astfel putem să ne organizăm mai bine codul și să oferim mai multe funcționalități elementului nostru.
Există două posibilități, executarea aceleiași acțiuni pentru mai multe evenimente sau executarea unei acțiuni diferite pentru fiecare, în orice mod dorim va trebui să folosim sintaxa completă, prima pe care am definit-o deja la început.
Să vedem cum să legăm diferite acțiuni la diferite evenimente pentru același element. Pentru aceasta trebuie să folosim o sintaxă de bază ca următoarea:

 $ (selector) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

După cum putem vedea, atunci când folosim această formă de sintaxă, evităm să facem ceva de genul:

 $ (selector) .ShortcutEvent1 (function () {}); $ (selector) .ShortcutEvent2 (function () {}); 

Ceea ce ne permite să fim mai organizați, totuși ambele sunt valabile și rămâne la latitudinea dezvoltatorului să o aplice pe cea care i se potrivește cel mai bine.
Deoarece știm cum să legăm mai multe evenimente de un element, îl vom pune în practică, vom selecta evenimentele click () Da focus () Pentru acest exemplu, atunci le vom aplica la două elemente, în primul element vom genera același răspuns pentru fiecare dintre ele, iar în al doilea fiecare eveniment va avea propriul său răspuns. Să vedem codul pe care trebuie să îl realizăm pentru a ne atinge obiectivul:

 Exemplul evenimentului 2
Același rezultat mai multe evenimente:

Rezultate diferite pe eveniment:
$ ("# element1"). on ("click focus", function () {console.log ("arătăm același lucru pentru 3 evenimente!");}); $ ("# element2"). on ({click: function () {console.log ("am făcut clic pe element2");}, focus: function () {console.log ("ne-am concentrat pe element2");}}); 

Aici vedem că trebuie să fim atenți la a doua formă de răspunsuri diferite pentru diferite evenimente, deoarece evenimentele nu intră în ghilimele ca atunci când o facem în prima formă, de asemenea, că trebuie să le încadrăm între paranteze {} totul în interiorul metodei .pe (), aceasta este o eroare care poate apărea foarte des, prin urmare, cu această precauție o putem evita. Acum să vedem cum arată exemplul nostru când îl rulăm în browserul nostru:

MARI
Notăm contorul cu un numarul 2 când au loc evenimentele de pe primul element, aceasta înseamnă că am făcut aceeași acțiune de două ori așa cum am planificat. În cel de-al doilea element observăm că imprimăm cele două acțiuni determinate în consolă, deși vedem, de asemenea, că acestea apar într-o ordine diferită de cea pe care le-am plasat, acest lucru se datorează faptului că concentrare se întâmplă înainte de clic în ierarhia evenimentelor, mai ales dacă folosim cheia TAB să se deplaseze între câmpuri.
La sfârșitul acestui tutorial am aflat cum putem începe cu lumea gestionării evenimentelor cu jQueryAcesta este doar un deschizător de gură, cu toate acestea, cu aceste mici caracteristici, putem realiza multe lucruri în aplicațiile noastre.

Te-a ajutat acest tutorial?
Dacă nu

AJUTĂ LA ÎMBUNĂTĂȚIREA ACESTUI TUTORIAL!
Crezi că poți corecta sau îmbunătăți acest tutorial? Puteți trimite ediția cu modificările pe care le considerați utile.
0 utilizatori au editat acest tutorial. Editați și deveniți un expert recunoscut!
Editați acest tutorial

TUTORII SIMILARE

Cum să trageți și să luați imagini cu UI JQueryCum se creează un spinner sau se încarcă pictograma cu JQueryPluginuri și biblioteci JQuery pentru dezvoltarea webGrilă dinamică Flexigrid cu JQuery și PHPManevrarea JSON cu Node.jsTratarea evenimentelor în Node.jsGestionarea bufferelor în Node.jsExpresii regulate cu Jquery
Fără comentarii, fii primul!
Nu mai așteptați și intrați în SolveticLasă-ți comentariile și profită de contul de utilizator Alătură-te nouă!

Creează contÎnscrieți-vă GRATUIT pentru a avea contul SolveticInregistreaza un cont
IdentificaAi deja un cont? Conectați-vă aiciIdentifică-mă în contul meu




informație

 Publicat 12 Dec 2014 14:44
 La curent 14 Dec 2014 05:44
 Vizite 3,7K
 NivelProfesional


Ultimele tutoriale JavaScript

Cum se actualizează NPM cu PowerShell în Windows 10
Cum să trageți și să luați imagini cu UI JQuery
Cum se creează un spinner sau se încarcă pictograma cu JQuery
Cum să aveți un site web tradus în mai multe limbi

Vedeți mai multe JavaScript