The po kliknutí udalosť vo všeobecnosti nastane, keď používateľ klikne na prvok. Umožňuje programátorovi vykonať funkciu JavaScriptu po kliknutí na prvok. Táto udalosť môže byť použitá na overenie formulára, varovné správy a mnoho ďalších.
Pomocou JavaScriptu je možné túto udalosť dynamicky pridať do akéhokoľvek prvku. Podporuje všetky prvky HTML okrem , , , , , , , ,
, , a . Znamená to, že nemôžeme použiť po kliknutí udalosť na daných značkách.
V HTML môžeme použiť po kliknutí atribút a priradiť a Funkcia JavaScript k tomu. Môžeme použiť aj JavaScript addEventListener() metóda a prejsť a kliknite pre väčšiu flexibilitu.
Syntax
Teraz vidíme syntax použitia po kliknutí udalosť v HTML a in javascript (bez addEventListener() metódou alebo pomocou addEventListener() metóda).
V HTML
V JavaScripte
object.onclick = function() { myScript }; V JavaScripte pomocou metódy addEventListener().
object.addEventListener('click', myScript);
Pozrime sa, ako používať po kliknutí udalosť pomocou niektorých ilustrácií. Teraz uvidíme príklady použitia po kliknutí udalosť v HTML a JavaScript.
int to char java
Príklad1 – Použitie atribútu onclick v HTML
V tomto príklade používame HTML po kliknutí atribút a priradenie funkcie JavaScriptu k nemu. Keď používateľ klikne na dané tlačidlo, vykoná sa príslušná funkcia a na obrazovke sa zobrazí dialógové okno s upozornením.
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 Vyskúšajte to Výkon
Po kliknutí na dané tlačidlo bude výstup -
Príklad2 – Používanie JavaScriptu
V tomto príklade používame JavaScript po kliknutí udalosť. Tu používame po kliknutí udalosť s prvkom odseku.
Keď používateľ klikne na prvok odseku, vykoná sa zodpovedajúca funkcia a text odseku sa zmení. Po kliknutí na zmení sa aj farba pozadia, veľkosť, orámovanie a farba textu.
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'; } Vyskúšajte to Výkon
Po kliknutí na text Klikni na mňa, výstup bude -
Príklad3 - Použitie metódy addEventListener().
V tomto príklade používame JavaScript addEventListener() spôsob pripojenia a kliknite udalosť k prvku odseku. Keď používateľ klikne na prvok odseku, text odseku sa zmení.
Po kliknutí na odsek sa zmení aj farba pozadia a veľkosť písma prvkov.
<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'; } Vyskúšajte to Výkon
css prvé dieťa
Po kliknutí na text Klikni na mňa , výstup bude -
