The na kliknięcie zdarzenie zwykle ma miejsce, gdy użytkownik kliknie element. Umożliwia programiście wykonanie funkcji JavaScript po kliknięciu elementu. Tego zdarzenia można używać do sprawdzania poprawności formularza, komunikatów ostrzegawczych i wielu innych.
Korzystając z JavaScript, to zdarzenie można dynamicznie dodać do dowolnego elementu. Obsługuje wszystkie elementy HTML z wyjątkiem , , , , , , , ,
, , I . Oznacza to, że nie możemy zastosować na kliknięcie zdarzenie na podanych tagach.
W HTML możemy używać na kliknięcie atrybut i przypisać a Funkcja JavaScriptu do tego. Możemy także użyć JavaScriptu dodajEventListener() metodę i zaliczyć a Kliknij zdarzenie, aby zapewnić większą elastyczność.
Składnia
Teraz widzimy składnię użycia metody na kliknięcie wydarzenie w HTML i w JavaScript (bez dodajEventListener() metodą lub za pomocą dodajEventListener() metoda).
W HTMLu
W JavaScript
object.onclick = function() { myScript }; W JavaScript przy użyciu metody addEventListener().
object.addEventListener('click', myScript);
Zobaczmy, jak używać na kliknięcie wydarzenie za pomocą ilustracji. Teraz zobaczymy przykłady użycia na kliknięcie zdarzenie w HTML i JavaScript.
drzewo wyszukiwania binarnego]
Przykład 1 - Użycie atrybutu onclick w HTML
W tym przykładzie używamy HTML na kliknięcie atrybut i przypisanie do niego funkcji JavaScript. Gdy użytkownik kliknie dany przycisk, zostanie wykonana odpowiednia funkcja, a na ekranie wyświetli się okno dialogowe z ostrzeżeniem.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Przetestuj teraz Wyjście
Po kliknięciu danego przycisku wyjściem będzie -
Przykład 2 – Korzystanie z JavaScript
W tym przykładzie używamy JavaScriptu na kliknięcie wydarzenie. Tutaj używamy na kliknięcie zdarzenie z elementem akapitu.
Kiedy użytkownik kliknie element akapitu, zostanie wykonana odpowiednia funkcja i tekst akapitu zostanie zmieniony. Po kliknięciu elementu, kolor tła, rozmiar, obramowanie i kolor tekstu również ulegną zmianie.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Przetestuj teraz Wyjście
Po kliknięciu tekstu Kliknij, wyjście będzie -
Przykład 3 — użycie metody addEventListener().
W tym przykładzie używamy JavaScript dodajEventListener() sposób mocowania a Kliknij zdarzenie do elementu akapitu. Gdy użytkownik kliknie element akapitu, tekst akapitu zostanie zmieniony.
Po kliknięciu akapitu zmieni się również kolor tła i rozmiar czcionki elementów.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Przetestuj teraz Wyjście
wzorce projektowe Java
Po kliknięciu tekstu Kliknij , wyjście będzie -
