The při kliknutí K události obvykle dochází, když uživatel klikne na prvek. Umožňuje programátorovi provést funkci JavaScriptu, když na prvek klikne. Tato událost může být použita pro ověření formuláře, varovné zprávy a mnoho dalších.
Pomocí JavaScriptu lze tuto událost dynamicky přidat do libovolného prvku. Podporuje všechny HTML prvky kromě , , , , , , , ,
, , a . To znamená, že nemůžeme použít při kliknutí událost na daných značkách.
V HTML můžeme použít při kliknutí atribut a přiřadit a Funkce JavaScript k tomu. Můžeme také použít JavaScript addEventListener() metoda a projít a klikněte pro větší flexibilitu.
Syntax
Nyní vidíme syntaxi použití při kliknutí událost v HTML a in javascript (bez addEventListener() metodou nebo pomocí addEventListener() metoda).
porovnat v řetězci
V HTML
V JavaScriptu
object.onclick = function() { myScript }; V JavaScriptu pomocí metody addEventListener().
object.addEventListener('click', myScript);
Podívejme se, jak používat při kliknutí událost pomocí některých ilustrací. Nyní uvidíme příklady použití při kliknutí událost v HTML a v JavaScriptu.
Příklad1 – Použití atributu onclick v HTML
V tomto příkladu používáme HTML při kliknutí atribut a přiřazení funkce JavaScriptu k němu. Když uživatel klikne na dané tlačítko, provede se příslušná funkce a na obrazovce se zobrazí dialogové okno s upozornění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 Otestujte to hned Výstup
Po kliknutí na dané tlačítko bude výstupem -
Příklad2 – Použití JavaScriptu
V tomto příkladu používáme JavaScript při kliknutí událost. Zde používáme při kliknutí událost s prvkem odstavce.
Když uživatel klikne na prvek odstavce, provede se odpovídající funkce a změní se text odstavce. Po kliknutí na změní se také barva pozadí, velikost, ohraničení a barva 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'; } Otestujte to hned Výstup
Po kliknutí na text Klikni na mě, výstup bude -
Příklad3 - Použití metody addEventListener().
V tomto příkladu používáme JavaScript addEventListener() způsob připojení a klikněte událost k prvku odstavce. Když uživatel klepne na prvek odstavce, text odstavce se změní.
Po kliknutí na odstavec se také změní barva pozadí a velikost písma prvků.
<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'; } Otestujte to hned Výstup
Po kliknutí na text Klikni na mě , výstup bude -
