Funcția OnClick din JQuery explicată cu exemple

Una dintre bibliotecile rapide, mici și bogate în funcții din JavaScript este jQuery. jQuery este folosit pentru realizarea de documente HTML, gestionarea evenimentelor, traversarea și manipularea etc.

Ori de câte ori se face clic pe un element HTML, apare evenimentul jQuery click. Pentru a declanșa funcția onclick în jQuery , se folosește metoda click(). De exemplu, la clic pe un paragraf dintr-un document, un eveniment de clic va fi declanșat prin metoda $(„p”).click(). Utilizatorul poate atașa o funcție la o metodă de clic ori de câte ori are loc un eveniment de clic pentru a rula funcția. O bucată de cod este astfel executată ori de câte ori este declanșat un eveniment click().

Clicul mouse-ului este simulat prin metoda HTMLElement.click().

Funcția Click() este o funcție încorporată în jQuery care pornește un eveniment de clic. Ori de câte ori se face clic pe un element relevant, un eveniment este declanșat printr-o metodă click(). Acest eveniment declanșează apoi un eveniment de clic al elementelor mai sus în arborele de documente (sau lanțul de evenimente).

După cum sugerează și numele, este pur și simplu apăsarea și eliberarea butonului mouse-ului de către utilizator peste element.

Unul sau mai mulți handler de evenimente sunt atașați elementelor selectate prin metoda on(). La clic pe un element, are loc un eveniment click(). O metodă click() este executată odată ce apare un eveniment click(). O funcție este atașată unei metode click() și executată. O metodă click() este utilizată cu alte evenimente ale jQuery.

Prin urmare, .click() leagă un handler de evenimente la evenimentul JavaScript „click”, sau declanșează un eveniment pe un element. Variațiile metodei JavaScript onclick sunt:

1. .click( handler ).
2. .click( [eventData ], handler ).
3. .clic().

Prima și a doua variație sunt o formă scurtă pentru .on( „click”, handler ) și scurtătura pentru .trigger( „click”) în ultima variație.

Ori de câte ori un cursor al mouse-ului este peste element și butonul este apăsat și eliberat, evenimentul click() este apoi trimis la acel element. Evenimentul poate fi primit de orice element al HTML.

Evenimentul Click() poate fi declanșat și dacă se face clic pe celălalt element prin următorul cod.

Cu acest cod, mesajul va fi alertat de element

Prin următoarele evenimente, este declanșat doar un eveniment click().

• Când indicatorul mouse-ului se află în interiorul unui element și butonul mouse-ului este apăsat.
• Când indicatorul mouse-ului se află în interiorul unui element și butonul mouse-ului este eliberat.

Înainte de a întreprinde o acțiune, evenimentele menționate mai sus sunt de obicei secvența dorită. Altfel, celălalt eveniment potrivit este mouse-ul jos sau mouse-ul sus.

Datorită faptului că metoda .click() este scurtătura pentru .on( „click”, handler ), posibilitatea detașării este prezentă prin utilizarea .off( „click”).

Utilizare

Sunt prezente două moduri care pot fi folosite pentru a apela o metodă click():

• Cu un argument de funcție dat
• Fără un argument dat

Funcția onclick din jQuery poate fi utilizată în elemente de HTML cum ar fi div, paragrafe, hyperlink-uri etc. pentru îndeplinirea sarcinii dorite. Un clic este un eveniment de mouse care are loc la apăsarea butonului de pe mouse. Totuși, evenimentul va avea loc dacă indicatorul unui mouse se află în cadrul elementului.

Sintaxă:

$(selector).click() ; -> folosit pentru declanșarea unui eveniment de clic pentru elementele selectate.

$(selector).click(funcție); -> folosit pentru atașarea funcției la un eveniment de clic.

• Parametrul opțional utilizat este „funcția” care este utilizată pentru execuția la apariția unui eveniment de clic.
• Valoare returnată: este returnat elementul selectat care este specificat cu funcția de efectuat.

Implementarea metodei click()

1. Când este dat un argument de funcție

În acest tip de implementare, o funcție este luată ca intrare și este executată ori de câte ori este apelată metoda click().

• Scrierea codului este între eticheta de script și în corpul HTML al codului.
• Apelarea funcției se face ca un atribut de stil h1.
• Un argument este declarat împreună cu funcția și este luat ca funcție separat.
• Comutarea metodei este aplicată peste obiect folosind acest operator cu o întârziere de 1000 ms.
• Un exemplu de metodă de implementare cu un argument de funcție dat este prezentat mai jos.

Rezultatul codului va fi „Dacă clic pe mine se va comuta textul!”

2. Când nu este dat niciun argument

Metoda javascript onclick declanșează un eveniment de Un element este deja atribuit metodei. Prin urmare, un element poate apela evenimentul la clic pe alt element separat. Acest lucru poate fi realizat prin următorii pași:

1. Un obiect trebuie declarat mai întâi cu un atribut al unui anumit stil pe care se poate face clic. O acțiune onclick trebuie declarată pentru obiect.
2. Un bloc de script urmează să fie creat în corpul codului unde atribuirea metodei click() se face unui format de stil diferit, p .
3. Metoda h1 onclick care este deja definită trebuie apelată în apelul funcției.
4. Aceeași metodă onclick este apoi apelată pentru un atribut.
5. Un exemplu de cod care arată implementarea unei metode click() fără un anumit argument este prezentat mai jos.

Rezultatul codului este „Dacă clic pe mine, se va apela o alertă!”.

• • Multe evenimente pot fi folosite în metoda $.on, cum ar fi dblclick, change și altele.

3. Redarea unui buton HTML și adăugarea de text în pagină la clic pe butonul. Metoda Click() este cel mai frecvent atașată unui buton, cu toate acestea, poate fi atașată la orice alte elemente dintr-o pagină web.

• • Un buton de bază este redat cu un id de „btn-primary” care se află în interiorul unui <div> cu un id de „main.
  • Prin intermediul codului, conținutul nou urmează să fie afișat cu o clasă de „conținut nou” în eticheta <p> după apăsarea butonului.
  • jQuery este inclus în etichetele <script>.

• • Metoda click() este atașată la id-ul butonului și un argument este luat ca o funcție de apel invers care este o funcție anonimă.
  • Șirul „Button clicked” este returnat de funcția de apel invers.

• • O funcție fără nume este pur și simplu numită funcție anonimă și utilizată ca apeluri inverse ca argumente ale unei metode. Pentru construirea oricăror site-uri web și aplicații receptive, funcțiile anonime și metodele de apel invers acționează ca piatră de temelie.

• • Codul va începe cu butonul din interiorul <div> „principal”.
  • Odată ce se face clic pe butonul, funcția de apel invers va fi apelată de handlerul de evenimente, deoarece metoda click() este atașată la selectorul de butoane.
  • Va fi afișat șirul „Button clicked”.
  • Codul de mai sus va reda conținutul o singură dată, însă pentru afișarea șirului de fiecare dată când se face clic pe cod, se folosește append() în loc de HTML().

• • Acesta va produce șirul de trei ori ca noul conținut în interiorul etichetei <p>.
  • Funcția de apel invers este apelată de fiecare dată când se face clic pe butonul.

Concluzie

Funcționarea funcției onclick în jquery a fost discutată în articol împreună cu utilizările și exemplele acesteia. Cu doar câteva linii de cod, funcționalitatea paginii web poate fi creată prin metoda JavaScript onclick .

Dacă aveți dorința de a afla mai multe despre dezvoltarea web și de a vă specializa în alte domenii conexe, atunci puteți verifica cursul „ Master of Science in Computer Science ” oferit de upGrad . Special conceput pentru profesioniștii de nivel entry-level (atât bărbați, cât și femei cu vârsta cuprinsă între 21 și 45 de ani), cursul se va desfășura pe o platformă online cu sesiuni live, pentru ușurința navetiștilor pe distanțe lungi. Cu peste 30 de proiecte și sarcini, studentul va primi beneficiile statutului de absolvent IIIT-Bangalore și LJMU . Nu ezitați să contactați echipa noastră pentru orice asistență.