Jak ustawić OnClick z JavaScript

Wydarzenie to działanie podjęte przez przeglądarkę lub użytkownika. Do obsługi tych wydarzeń można wykorzystać koncepcję JavaScript Cringlers lub słuchaczy. Pewne wydarzenie uruchamia wykonanie słuchacza zdarzeń. Jednym z tych słuchaczy wydarzeń jest „na kliknięcie.”Gdy użytkownik kliknie element, uruchamiany lub wykonywany jest słuchacz zdarzeń OnClick.

Ten samouczek zdefiniuje procedurę, jak ustawić OnClick z JavaScript.

Jak ustawić OnClick z JavaScript

Ustawić na kliknięcie W przypadku JavaScript istnieją dwie różne metody, które są:

• Pierwszą metodą jest przypisanie wartości do elementu HTML na kliknięcie atrybut za pomocą JavaScript.
• Drugą metodą jest wyraźne dodanie słuchacza zdarzeń w wydarzeniu HTML, które sprawdza „Kliknij" wydarzenie.

Przykład 1: Przypisz wartość do atrybutu onClick elementu HTML za pomocą JavaScript

W pliku HTML utwórz nagłówek i przycisk ”Kliknij”Z identyfikatorem„JS”, Która uruchomi funkcję JavaScript podczas klikalności.

Ustaw właściwość OnClick z JavaScript

Kliknij

W poniższym etapie uzyskano dostęp do utworzonego przycisku i „na kliknięcie„Atrybut zostanie do niego dołączony. Po kliknięciu przycisku określona funkcja zostanie wykonana, a „styl.kolor tła„Właściwość zmienia kolor przycisku w następujący sposób:

dokument.getElementById („JS”).onClick = funkcja jsfunc ()
dokument.getElementById („JS”).styl.tło Color = "Purple";

Odpowiednie wyjście będzie:

Przykład 2: Już wyraźnie dodaj słuchacz zdarzeń podczas wydarzenia HTML

Utwórz przycisk „Kliknij tutaj!”I przypisuje identyfikator„wydarzenie„Do tego wywoła metodę addEventListener () na "Kliknij" wydarzenie:

Kliknij tutaj!przycisk>

Pobieraj przycisk za pomocą IT ID a następnie dołącz „addEventListener ()„Metoda, przekazując„Kliknij„Wydarzenie i funkcja”EventFunc„Gdzie zostanie zmieniony kolor tła przycisku:

dokument.getElementById („wydarzenie”).addEventListener („kliknij”, eventFunc);
funkcja eventFunc ()
dokument.getElementById („wydarzenie”).styl.tło Color = „zielony”;

Wyjście

Przykład 3: Korzystanie z wszystkich metod OnClick jednocześnie

W tym przykładzie działanie wszystkich metod zostanie wyświetlone jednocześnie. Pierwszy to domyślny sposób dodania atrybutu onClick w samym znaczniku HTML. Następnie wykazano również dwie metody ustawiania atrybutu OnClick za pomocą JavaScript.

W poniższym przykładzie utwórz trzy przyciski i zobacz funkcjonalność atrybutu onClick.

• Pierwszy przycisk „Kliknij„Zadzwoni do„htmlfunc ()”W wydarzeniu kliknięcia.
• Przycisk "Kliknij”Dostęp do przypisanego identyfikatora„JS”, A następnie przypisz wartość do atrybutu OnClick przycisku za pomocą JavaScript.
• Przycisk "Kliknij tutaj!”Dostęp do ID”wydarzenie”A następnie dołącz„addEventListener ()„Metoda z tym:

Kliknij


Kliknij


Kliknij tutaj!

Poniższa funkcja wywoła „na kliknięcie„Wydarzenie przycisku”Kliknij”:

funkcja htmlfunc ()
alert („przycisk kliknięty przez zdarzenie html onClick”);

Po kliknięciu „Kliknij” button, the following function will trigger where a warning message will be displayed.

dokument.getElementById („JS”).onClick = funkcja jsfunc ()
alert („przycisk kliknięty przez funkcję JavaScript OnClick”);

Podana funkcja uruchomi przycisk „Kliknij tutaj!”:

dokument.getElementById („wydarzenie”).addEventListener („kliknij”, eventFunc);
funkcja eventFunc ()
alert („przycisk kliknięty przez JavaScript onClick z metodą EventListener”);

Wyjście wyświetli komunikaty alertów na każdym przycisku Kliknij:

Wniosek

Aby ustawić onClick za pomocą JavaScript, istnieją dwa różne podejścia, pierwszym jest przypisanie wartości do atrybutu onClick elementu HTML za pomocą JavaScript, a drugim podejściem jest wyraźne dodanie słuchacza zdarzenia w wydarzeniu HTML, które sprawdza „”Kliknij" wydarzenie. Ten samouczek zdefiniował metody ustawienia OnClick z JavaScript wraz z przykładami.