The na klik događaj se općenito događa kada korisnik klikne na element. Programeru omogućuje izvršavanje JavaScript funkcije kada se klikne na element. Ovaj se događaj može koristiti za provjeru valjanosti obrasca, poruke upozorenja i još mnogo toga.
Pomoću JavaScripta ovaj se događaj može dinamički dodati bilo kojem elementu. Podržava sve HTML elemente osim , , , , , , , ,
, , i . To znači da ne možemo primijeniti na klik događaj na zadanim oznakama.
skener u Javi
U HTML-u možemo koristiti na klik pripisati i dodijeliti a JavaScript funkcija na to. Također možemo koristiti JavaScript addEventListener() metoda i prolaz a klik događaj za veću fleksibilnost.
Sintaksa
Sada vidimo sintaksu korištenja na klik događaj u HTML-u i in javascript (bez addEventListener() metodom ili korištenjem addEventListener() metoda).
U HTML-u
U JavaScriptu
object.onclick = function() { myScript }; U JavaScriptu pomoću metode addEventListener().
object.addEventListener('click', myScript);
Pogledajmo kako koristiti na klik događaj koristeći neke ilustracije. Sada ćemo vidjeti primjere korištenja na klik događaj u HTML-u i JavaScriptu.
Primjer1 - Korištenje atributa onclick u HTML-u
U ovom primjeru koristimo HTML na klik atribut i dodjeljivanje JavaScript funkcije njemu. Kada korisnik klikne određeni gumb, izvršit će se odgovarajuća funkcija, a na zaslonu će se prikazati dijaloški okvir upozorenja.
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 Testirajte sada Izlaz
središnji css gumb
Nakon klika na dani gumb, izlaz će biti -
Primjer2 - Korištenje JavaScripta
U ovom primjeru koristimo JavaScript na klik događaj. Ovdje koristimo na klik događaj s elementom odlomka.
Kada korisnik klikne na element odlomka, izvršit će se odgovarajuća funkcija, a tekst odlomka se mijenja. Pritiskom na promijenit će se i boja pozadine, veličina, obrub i boja teksta.
kako centrirati sliku na css
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'; } Testirajte sada Izlaz
Nakon klika na tekst klikni me, izlaz će biti -
10 ml je koliko
Primjer3 - Korištenje metode addEventListener().
U ovom primjeru koristimo JavaScript addEventListener() način pričvršćivanja a klik događaj elementu paragrafa. Kada korisnik klikne element odlomka, tekst odlomka se mijenja.
Klikom na odlomak promijenit će se i boja pozadine i veličina fonta elemenata.
<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'; } Testirajte sada Izlaz
Klikom na tekst Klikni me , izlaz će biti -
