Zdarzenie onclick JavaScript
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.
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
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
Po kliknięciu tekstu Kliknij , wyjście będzie -
