Introducere în jQuery Events
JQuery este una dintre cele mai populare și utilizate pe scară largă biblioteci javascript, care este dezvoltat și conceput pentru a simplifica arhitectura DOM bazată pe HTML, adică proprietățile modelului obiectului de document, cum ar fi citirea, manipularea și traversarea arborelui. Celelalte proprietăți de la jQueries precum gestionarea evenimentelor, Ajax, styling și animația CSS sunt de asemenea simplificate. Este o sursă deschisă și o bibliotecă gratuită, care este folosită de obicei în 73% din cca. 10 milioane de site-uri web care sunt folosite astăzi. Caracteristicile de bază ale Jquery includ proprietăți bazate pe elemente DOM, cum ar fi selectoare, manipulare și traversare de arbori, ceea ce face ca lucrul la JQuery să fie mult mai interesant, mai ușor și mai convenabil.
Este utilizat pentru a oferi o interfață foarte simplă și cu aspect simplu, care poate fi utilizat pentru aplicarea diverselor tipuri de efecte uimitoare. Aceste metode permit, de asemenea, utilizarea rapidă și aplicarea caracteristicilor utilizate cel mai frecvent și a efectelor acestora, împreună cu configurații de la bare până la minime. Comenzile de bază, cum ar fi cele pentru afișarea și ascunderea elementelor sunt cam aceleași și restul, de asemenea, se află în aceeași categorie cu ceea ce oricine ar dori să le vadă. comanda show (), în acest caz, este utilizată pentru a arăta elementele într-un întreg învelit și o comandă combinată set și hide () este utilizată pentru a ascunde aceste caracteristici.
Jquery este personalizat, care este utilizat pentru a răspunde la evenimentele furnizate într-o pagină HTML. Evenimentele în sine sunt diferite acțiuni ale vizitatorilor la care poate răspunde pagina web. Cu alte cuvinte, un eveniment este folosit pentru a reprezenta ușor momentul precis sau exact, în special ceva ce s-a întâmplat. Aceasta poate include scenarii precum mutarea mouse-ului peste element, clic și selectarea butonului radio și, de asemenea, clic pe element. Termenul de incendiu sau termenul concediat este de multe ori utilizat împreună cu evenimentul. De exemplu, evenimentul de apăsare a tastei este declanșat sau mai popular denumit ca tras, este în principal atunci când apăsați tasta. Iată lista celor mai frecvente și frecvent utilizate evenimente DOM.
Evenimente de mouse, cum ar fi dblclick, mouseleave, mouseenter, faceți clic pe. Există și alte evenimente de la tastatură, cum ar fi Keypress, keyup și keydown. Există și alte forme de evenimente, cum ar fi evenimentele de schimbare, trimitere, estompare și focalizare. Există alte evenimente care sunt documente sau ferestre, cum ar fi redimensionarea, încărcarea, defilarea, descărcarea, etc. în Jquery, majoritatea evenimentelor bazate pe DOM au metoda de consultare corespunzătoare. Prin urmare, pentru a aloca un nou eveniment tuturor paragrafelor existente pe pagină, sintaxa de mai jos poate fi folosită.
Evenimente și sintaxă de jQuery
Iată următoarele evenimente ale jQuery cu sintaxa dată mai jos
1. Faceți clic pe ()
Acest eveniment are loc de fiecare dată când se face clic pe element. Această metodă de clic () este utilizată pentru a declanșa elementul clic, cunoscut și sub numele de eveniment de clic, care este utilizat pentru a atașa la o funcție de fiecare dată când are loc un eveniment legat de clic.
Sintaxă
$(selector).click()
Când doriți să atașați o funcție la acest eveniment de clic,
$(selector).click(function)
Următorul pas vine întotdeauna împreună cu acțiunea și declanșatorul care formează funcționarea și funcționarea efectivă a funcției și, prin urmare, de fiecare dată când evenimentul este tras, o funcție ar trebui să fie transmisă la eveniment.
Exemplu
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Această metodă este utilizată pentru a atașa o funcție de gestionare a evenimentelor la elementul HTML furnizat. Această funcție este executată de fiecare dată când utilizatorul face dublu clic pe elementul HTML dat.
Sintaxă
$(selector).dblclick()
Exemplu
$("p").dblclick(function()(
$(this).hide();
));
3. schimbare ()
Acest eveniment are loc ori de câte ori se modifică valoarea unui anumit element, adică funcționează numai pentru elementele de intrare, textarea și elementele selectate. Metoda de modificare () este utilizată pentru a declanșa un eveniment de schimbare sau cel care se atașează la funcție ori de câte ori trebuie să apară un eveniment legat de schimbare.
Sintaxă
$(selector).change()
Exemplu
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. estompare ()
Acest eveniment legat de estompare are loc numai atunci când elementul pierde focalizarea. Metoda încețoșare () care este utilizată pentru a declanșa evenimentul de estompare sau cea care este utilizată pentru a atașa o funcție care trebuie rulată ori de câte ori are loc un eveniment de estompare. Această metodă este folosită adesea cu metoda focus ().
Sintaxă
$(selector).blur()
Exemplu
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. date
Această proprietate event.data este utilizată pentru a conține datele trecute opționale legate de o metodă de eveniment atunci când gestionarul de execuție pentru curent este legat.
Sintaxă
event.data
Exemplu
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. spațiu de nume
Această proprietate este utilizată pentru a returna spațiul de nume personalizat ori de câte ori evenimentul este declanșat. Proprietatea este setată de autori de pluginuri care pot fi utilizate pentru a gestiona sarcinile foarte diferit, care depinde de spațiul de nume utilizat. Spațiile de nume care au început cu sublinierea sunt spații de nume rezervate pentru JQuery.
Sintaxă
event.namespace
Exemplu
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PaginaX
Aceasta este proprietatea tipului de pagină care este utilizată pentru a returna poziția indicelui de mouse care este legată de marginea din stânga a documentului. Acest tip de proprietate este adesea folosit cu evenimentul. Proprietatea PageY.
Sintaxă
event.PageX
Exemplu
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PaginaY
Aceasta este proprietatea tipului de pagină care este utilizată pentru a returna poziția indicelui mouse-ului care este legată de marginea din partea superioară a documentului. Acest tip de proprietate este adesea folosit cu evenimentul. Proprietate PageX.
Sintaxă
event.PageY
Exemplu
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. rezultat
Proprietatea event.result este utilizată pentru a conține valoarea anterioară sau ultima care este returnată de gestionarul de evenimente care este declanșată în mod specific de evenimentul specific.
Sintaxă
event.result
Exemplu
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Această metodă legată de evenimente.preventDefault () este utilizată pentru a opri acțiunea implicită a unui anumit element. Exemplele acestui scenariu includ:
Împiedicarea trimiterii unui buton pentru a trimite un buton
Împiedicați accesul unui link la o anumită adresă URL.
Un anumit eveniment, cum ar fi event.preventDefault (), este utilizat pentru a verifica dacă metoda sau funcția preventDefault () este folosită pentru a apela la eveniment.
Sintaxă
event.preventDefault()
Exemplu
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Această proprietate este utilizată pentru a returna elementul DOM care urmează să fie declanșat de acest eveniment. Cel mai adesea este util să se compare evenimentul.target cu acest lucru pentru a determina dacă evenimentul special este gestionat din cauza unui eveniment numit bubbling.
Sintaxă
event.target
Exemplu
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. Timpul timpului
Această proprietate este utilizată pentru a returna numărul de milisecunde începând cu data de 1 ianuarie 1970, ceea ce corespunde pentru prima dată când evenimentul a fost declanșat pentru prima dată.
Sintaxă
event.TimeStamp
Exemplu
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tip
Acesta este utilizat pentru a monitoriza evenimentul și tipul său care este declanșat.
Sintaxă
event.type
Exemplu:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. care ()
Această proprietate este utilizată pentru a returna tasta tastaturii sau butonul mouse-ului care a fost apăsat pentru eveniment.
Sintaxă
event.which
Exemplu
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focalizare ()
Această proprietate și focalizarea pentru acest eveniment are loc atunci când un element este utilizat pentru a obține focalizarea care se produce atunci când este selectat cu un clic sau cu navigarea pe o filă. Metoda focus () este utilizată pentru a declanșa evenimentul de focalizare sau pentru a atașa o funcție care să fie executată atunci când are loc un eveniment legat de focalizare.
Sintaxă
$(selector).focus()
Exemplu
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. plimbare ()
Această metodă hover este utilizată pentru a specifica două funcții utilizate pentru a rula atunci când pointerul mouse-ului trece peste toate elementele selectate. Această metodă declanșează atât evenimente de mouseleave, cât și mouseenter. Dacă este specificată o singură funcție, aceasta va rula atât pentru evenimente de mouseleave, cât și pentru mouseenter.
Sintaxă
$(selector).hover(inFunction, outFunction)
Exemplu
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Ordinea evenimentelor legate de evenimentul de tip keydown este:
- Keydown: Aceasta este folosită atunci când cheia este în jos.
- Tasta de taste: Aceasta se produce la apăsarea tastei tastaturii
- Keyup: După cum sugerează numele, aceasta este utilizată atunci când este apăsată tasta din partea ascendentă.
Sintaxă
$(selector).keydown()
Exemplu
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. apăsarea tastelor ()
Ordinea evenimentelor legate de evenimentul de tipărire este:
- Keydown: Aceasta este folosită atunci când cheia este în jos.
- Tasta de taste: Aceasta se produce la apăsarea tastei tastaturii
- Keyup: După cum sugerează numele, aceasta este utilizată atunci când este apăsată tasta din partea ascendentă.
Sintaxă
$(selector).keypress()
Exemplu
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Ordinea evenimentelor legate de evenimentul de tip keyup este:
- Keydown: Aceasta este folosită atunci când cheia este în jos.
- Tasta de taste: Aceasta se produce la apăsarea tastei tastaturii
- Keyup: După cum sugerează numele, aceasta este utilizată atunci când este apăsată tasta din partea ascendentă.
Sintaxă
$(selector).keyup()
Exemplu
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Această metodă sau funcție live () a jquery-ului este utilizată pentru a atașa unul sau mai multe handler-uri bazate pe evenimente pentru a fi utilizate în special pentru listele selectate de elemente și, de asemenea, specifică funcția care trebuie rulată acolo unde au loc evenimentele. Toate operatorii de evenimente sunt atașați folosind metoda live () care va funcționa atât pentru elementele actuale cât și pentru FUTURE, care se bazează pe potrivirea elementelor de selectare, care pot fi ca un element nou creat de script. Metoda die () poate fi folosită pentru distrugerea metodei live ().
Sintaxă
$(selector).live(event, data, function)
Exemplu
$("button").live("click", function()(
$("p").slideToggle();
));
21. Sarcina ()
Metoda de încărcare este utilizată pentru a atașa un manager de evenimente la evenimentul bazat pe sarcină. Evenimentul de încărcare are loc ori de câte ori este specificat Acest eveniment apare și funcționează ori de câte ori elementele asociate cu adresa URL, cum ar fi imagine, cadru, script, iframe și obiectul fereastră. Evenimentul de încărcare poate sau nu să se declanșeze și depinde de browser chiar dacă imaginea este în cache. Există, de asemenea, o metodă AJAX care este o metodă jquery cunoscută sub denumirea de load (), cea care se numește depinde de parametri.
Sintaxă
$(selector).load(function)
Exemplu
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Acest eveniment are loc numai atunci când este apăsat butonul indicatorului stânga al mouse-ului peste lista selectată a elementului. Metoda sau funcția mousedown () este utilizată pentru a declanșa acest eveniment care atașează o funcție și se execută ori de câte ori se întâmplă un eveniment de mousedown. Această metodă este adesea folosită împreună cu metoda mouse-ului ().
Sintaxă
$(selector).mousedown()
Exemplu
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Oprit ()
Această metodă este utilizată pentru a elimina un gestionar de evenimente care este atașat împreună cu metoda on (). Se poate spune că este înlocuirea metodei dezlegare (), metoda die () și a metodei nedelegate (). Această metodă este utilizată pentru a aduce o mare consistență API-ului și se recomandă întotdeauna utilizarea acestei metode, deoarece aceasta este utilizată pentru a simplifica baza de cod Jquery.
Sintaxă
$(selector).off(event, selector, function(eventObj), map)
Exemplu
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Acest eveniment are loc ori de câte ori indicatorul mouse-ului este peste elementul specificat și intră pe măsură ce declanșează evenimentul mouseenter sau este folosit pentru a atașa o funcție care poate fi utilizată pentru a rula ori de câte ori are loc un eveniment bazat pe mouseenter.
Sintaxă
$(selector).mouseenter()
Exemplu
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Acest eveniment are loc ori de câte ori indicatorul mouse-ului este peste elementul specificat și se lasă pe măsură ce declanșează evenimentul pleacă mouse-ul sau este folosit pentru a dezactiva o funcție care poate fi utilizată pentru a rula ori de câte ori are loc un eveniment bazat pe mouseleave.
Sintaxă
$(selector).mouseleave()
Exemplu
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery este una dintre cele mai utilizate biblioteci atunci când vine vorba de dezvoltarea front-end. Aceasta oferă caracteristici unice și o gamă largă de funcții care ajută la ușurarea și comoditatea vieții dezvoltatorilor și a oamenilor. Sper că v-a plăcut articolul nostru. Rămâneți la curent cu blogul nostru pentru mai multe ca acestea.
Articole recomandate
Acesta este un ghid pentru evenimentele jQuery. Aici vom discuta lista celor mai frecvente și frecvent utilizate diverse evenimente de jQuery cu Sintaxă și exemple. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- Efecte jQuery
- Metode jQuery
- jQuery Atribute
- Cum se instalează Jquery?
- Top 8 selectori jQuery cu implementare de cod
- Ghid pentru exemple de bare de progres JQuery
- Ghid pentru diferite evenimente JavaScript