Ten samouczek zdefiniuje procedurę ustawiania onClick za pomocą JavaScript.
Jak ustawić onClick za pomocą JavaScript
Aby ustawić na kliknięcie w JavaScript istnieją dwie różne metody, którymi są:
- Pierwsza metoda polega na przypisaniu wartości do elementu HTML na kliknięcie atrybut za pomocą JavaScript.
- Druga metoda polega na jawnym dodaniu detektora zdarzeń do zdarzenia 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 po kliknięciu na nią.
< h2 > Ustawić Właściwość onClick Z JavaScript h2 >
< identyfikator przycisku = 'js' > Kliknij przycisk >
W następnym kroku utworzony przycisk zostanie udostępniony i pojawi się „ na kliknięcie ” zostanie do niego dołączony atrybut. Po kliknięciu przycisku określona funkcja zostanie wykonana, a „ styl.kolor tła ” zmieni kolor przycisku w następujący sposób:
dokument. getElementById ( 'js' ) . na kliknięcie = funkcja jsFunc ( ) {
dokument. getElementById ( 'js' ) . styl . kolor tła = 'Fioletowy' ;
}
Odpowiednim wyjściem będzie:
Przykład 2: jawne dodanie detektora zdarzeń do zdarzenia HTML
Utwórz przycisk „ Kliknij tutaj! ” i przypisuje identyfikator „ wydarzenie ” do niego, co uruchomi metodę addEventListener() na 'Kliknij' wydarzenie:
< identyfikator przycisku = 'wydarzenie' > Kliknij tutaj ! silny > przycisk silny >>
Pobierz przycisk za pomocą jego ID a następnie dołączyć „ addEventListener() ” poprzez przekazanie „ Kliknij „zdarzenie i funkcja” eventFunc ”, gdzie zostanie zmieniony kolor tła przycisku:
dokument. getElementById ( 'wydarzenie' ) . addEventListener ( 'Kliknij' , funkcja zdarzenia ) ;funkcja zdarzenieFunc ( ) {
dokument. getElementById ( 'wydarzenie' ) . styl . kolor tła = 'Zielony' ;
}
Wyjście
Przykład 3: Jednoczesne użycie wszystkich metod onClick
W tym przykładzie działanie wszystkich metod zostanie wyświetlone jednocześnie. Pierwszy to domyślny sposób dodawania atrybutu onclick w samym tagu HTML. Następnie zademonstrowano również dwie metody ustawiania atrybutu onclick za pomocą JavaScript.
W poniższym przykładzie utwórz trzy przyciski i zobacz działanie atrybutu onclick.
- Pierwszy przycisk „ Kliknij ” zadzwoni do „ Funkcja html() ” w zdarzeniu kliknięcia.
- Przycisk ' Kliknij ” będzie dostępny z przypisanym identyfikatorem „ js ”, a następnie przypisz wartość atrybutowi onclick przycisku za pomocą JavaScript.
- Przycisk ' Kliknij tutaj! ” będzie dostępny przy użyciu identyfikatora „ wydarzenie ”, a następnie dołączyć „ addEventListener() ” metoda z tym:
< identyfikator przycisku = 'js' > Kliknij przycisk >< br >< br >
< identyfikator przycisku = 'wydarzenie' > Kliknij tutaj ! przycisk >
Poniższa funkcja uruchomi „ na kliknięcie „zdarzenie przycisku” Kliknij ”:
funkcja htmlFunc ( ) {alarm ( „Przycisk kliknięty przez zdarzenie HTML onClick” ) ;
}
Po kliknięciu „ Kliknij ”, uruchomi się następująca funkcja, w której zostanie wyświetlony komunikat ostrzegawczy.
dokument. getElementById ( 'js' ) . na kliknięcie = funkcja jsFunc ( ) {alarm ( „Przycisk kliknięty przez funkcję JavaScript onClick” ) ;
}
Podana funkcja uruchomi przycisk „ Kliknij tutaj! ”:
dokument. getElementById ( 'wydarzenie' ) . addEventListener ( 'Kliknij' , funkcja zdarzenia ) ;funkcja zdarzenieFunc ( ) {
alarm ( „Przycisk kliknięty przez JavaScript onClick z metodą EventListener” ) ;
}
Dane wyjściowe będą wyświetlać komunikaty ostrzegawcze przy każdym kliknięciu przycisku:
Wniosek
Aby ustawić onclick za pomocą JavaScript, istnieją dwa różne podejścia, pierwsze polega na przypisaniu wartości atrybutowi onclick elementu HTML za pomocą JavaScript, a drugie podejście polega na jawnym dodaniu detektora zdarzeń do zdarzenia HTML, który sprawdza „ Kliknij ' wydarzenie. W tym samouczku zdefiniowano metody ustawiania onClick za pomocą JavaScript wraz z przykładami.