Funkcja OnClick w JQuery wyjaśniona na przykładach

Jedną z szybkich, małych i bogatych w funkcje bibliotek JavaScript jest jQuery. jQuery służy do tworzenia dokumentów HTML, obsługi zdarzeń, przechodzenia i manipulacji itp.

Każde kliknięcie elementu HTML powoduje wystąpienie zdarzenia kliknięcia jQuery. Aby wywołać funkcję onclick w jQuery , używana jest metoda click(). Na przykład po kliknięciu akapitu w dokumencie zdarzenie kliknięcia zostanie wywołane przez metodę $(„p”).click(). Użytkownik może dołączyć funkcję do metody kliknięcia za każdym razem, gdy wystąpi zdarzenie kliknięcia, aby uruchomić funkcję. W ten sposób fragment kodu jest wykonywany za każdym razem, gdy zostanie wyzwolone zdarzenie click().

Kliknięcie myszą jest symulowane za pomocą metody HTMLElement.click().

Funkcja Click() jest funkcją wbudowaną w jQuery, która uruchamia zdarzenie kliknięcia. Za każdym razem, gdy zostanie kliknięty odpowiedni element, zdarzenie jest wywoływane przez metodę click(). Zdarzenie to następnie uruchamia zdarzenie kliknięcia elementów znajdujących się wyżej w drzewie dokumentu (lub łańcuchu zdarzeń).

Jak sama nazwa wskazuje, jest to po prostu naciśnięcie i zwolnienie przycisku myszy przez użytkownika nad elementem.

Co najmniej jedna procedura obsługi zdarzeń jest dołączona do wybranych elementów za pomocą metody on(). Po kliknięciu elementu następuje zdarzenie click(). Metoda click() jest wykonywana po wystąpieniu zdarzenia click(). Funkcja jest dołączona do metody click() i wykonywana. Metoda click() jest używana z innymi zdarzeniami jQuery.

Dlatego .click() wiąże procedurę obsługi zdarzenia ze zdarzeniem JavaScript „click” lub wyzwala zdarzenie na elemencie. Odmiany metody JavaScript onclick to:

1. .klik( handler ).
2. .click( [DaneZdarzenia ], handler ).
3. .Kliknij().

Pierwsza i druga odmiana to skrócona forma dla .on( „klik”, handler ) oraz skrót dla .trigger( „klik” ) w ostatniej odmianie.

Za każdym razem, gdy wskaźnik myszy znajduje się nad elementem, a przycisk został naciśnięty i zwolniony, zdarzenie click() jest następnie wysyłane do tego elementu. Zdarzenie może zostać odebrane przez dowolny element HTML.

Zdarzenie Click() można również wyzwolić, jeśli inny element zostanie kliknięty za pomocą poniższego kodu.

Z tym kodem wiadomość zostanie ostrzeżona przez element

Poprzez następujące zdarzenia wyzwalane jest tylko zdarzenie click().

• Gdy wskaźnik myszy znajduje się wewnątrz elementu, a przycisk myszy jest wciśnięty.
• Gdy wskaźnik myszy znajduje się wewnątrz elementu i przycisk myszy jest zwolniony.

Przed podjęciem działania, wyżej wymienione zdarzenia są zwykle pożądaną sekwencją. W przeciwnym razie innym odpowiednim zdarzeniem jest zdarzenie w dół lub w górę myszy.

Ze względu na to, że metoda .click() jest skrótem do .on( „klik”, handler ), możliwość odłączenia jest dostępna poprzez użycie .off( „klik” ).

Stosowanie

Istnieją dwa sposoby, które można wykorzystać do wywołania metody click():

• Z podanym argumentem funkcji
• Bez podanego argumentu

Funkcja onclick w jQuery może być używana w elementach HTML, takich jak div, paragrafy, hiperłącza itp. do wykonania żądanego zadania. Kliknięcie to zdarzenie myszy, które następuje po naciśnięciu przycisku myszy. Jednak zdarzenie nastąpi, jeśli wskaźnik myszy znajdzie się w elemencie.

Składnia:

$(selektor).klik() ; -> służy do wyzwalania zdarzenia kliknięcia dla wybranych elementów.

$(selektor).klik(funkcja); -> służy do dołączania funkcji do zdarzenia kliknięcia.

• Użytym parametrem opcjonalnym jest „funkcja”, która jest używana do wykonania po wystąpieniu zdarzenia kliknięcia.
• Wartość zwracana: zwracany jest wybrany element, który jest określony w funkcji do wykonania.

Implementacja metody click()

1. Gdy podano argument funkcji

W tego typu implementacji funkcja jest traktowana jako dane wejściowe i jest wykonywana za każdym razem, gdy wywoływana jest metoda click().

• Zapis kodu odbywa się między tagiem skryptu a treścią kodu HTML .
• Wywołanie funkcji odbywa się jako atrybut stylu h1.
• Argument jest deklarowany z funkcją i jest traktowany jako funkcja oddzielnie.
• Przełączanie metody jest stosowane do obiektu przy użyciu tego operatora z opóźnieniem 1000 ms.
• Poniżej pokazano przykład metody implementacji z podanym argumentem funkcji.

Wynikiem kodu będzie „Kliknięcie mnie spowoduje przełączenie tekstu!”

2. Gdy nie podano argumentu

Metoda javascript onclick uruchamia zdarzenie Element jest już przypisany do metody. Dlatego element może wywołać zdarzenie przy kliknięciu innego elementu oddzielnie. Można to osiągnąć, wykonując następujące kroki:

1. Obiekt musi być najpierw zadeklarowany z atrybutem określonego stylu, który jest klikalny. Dla obiektu należy zadeklarować akcję onclick .
2. W treści kodu ma zostać utworzony blok skryptu , w którym metoda click() zostanie przypisana do formatu o innym stylu, s .
3. W ramach wywołania funkcji należy wywołać metodę h1 onclick, która jest już zdefiniowana.
4. Ta sama metoda onclick jest następnie wywoływana dla atrybutu.
5. Poniżej znajduje się przykład kodu pokazującego implementację metody click() bez podanego argumentu.

Wynik kodu to „Kliknięcie mnie wywoła alert!”.

• • W metodzie $.on można użyć wielu zdarzeń, takich jak dblclick, change i inne.

3. Renderowanie przycisku HTML i dodawanie tekstu do strony po kliknięciu przycisku. Metoda Click() jest najczęściej dołączona do przycisku, jednak może być dołączona do dowolnego innego elementu na stronie internetowej.

• • Podstawowy przycisk jest renderowany z identyfikatorem „btn-primary”, który znajduje się w <div> z identyfikatorem „main.
  • Za pomocą kodu nowa treść ma być wyświetlana z klasą „nowa treść” w tagu <p> po kliknięciu przycisku.
  • jQuery jest zawarte w tagach <script>.

• • Metoda click() jest dołączona do identyfikatora przycisku, a argument jest traktowany jako funkcja wywołania zwrotnego, która jest funkcją anonimową.
  • Ciąg „Kliknięty przycisk” jest zwracany przez funkcję zwrotną.

• • Funkcja bez nazwy jest po prostu określana jako funkcja anonimowa i używana jako wywołania zwrotne jako argumenty metody. W przypadku budowania dowolnych responsywnych stron internetowych i aplikacji, funkcje anonimowe i metody wywołań zwrotnych pełnią rolę fundamentu.

• • Kod rozpocznie się od przycisku znajdującego się w <div> „main”.
  • Po kliknięciu przycisku funkcja wywołania zwrotnego zostanie wywołana przez program obsługi zdarzeń, ponieważ metoda click() zostanie dołączona do selektora przycisku.
  • Zostanie wyświetlony ciąg „Kliknięty przycisk”.
  • Powyższy kod wyrenderuje treść tylko raz, jednak do wyświetlania ciągu za każdym razem, gdy kod zostanie kliknięty, zamiast HTML() użyto append().

• • Wygeneruje ciąg trzy razy jako nową zawartość wewnątrz znacznika <p>.
  • Funkcja wywołania zwrotnego jest wywoływana po każdym kliknięciu przycisku.

Wniosek

W artykule omówiono działanie funkcji onclick w jquery wraz z jej zastosowaniami i przykładami. Za pomocą zaledwie kilku linijek kodu można utworzyć funkcjonalność strony internetowej za pomocą metody JavaScript onclick .

Jeśli masz ochotę dowiedzieć się więcej o tworzeniu stron internetowych i specjalizować się w innych powiązanych dziedzinach, możesz sprawdzić kurs „ Master of Science in Computer Science ” oferowany przez upGrad . Specjalnie zaprojektowany dla początkujących profesjonalistów (zarówno mężczyzn, jak i kobiet w wieku od 21 do 45 lat), kurs będzie prowadzony na platformie internetowej z sesjami na żywo, aby ułatwić dojazdy do pracy na długich dystansach. Z ponad 30 projektami i zadaniami, uczeń będzie czerpał korzyści ze statusu absolwentów IIIT-Bangalore i LJMU . Zapraszamy do kontaktu z naszym zespołem w celu uzyskania pomocy.