De bij klikken gebeurtenis vindt doorgaans plaats wanneer de gebruiker op een element klikt. Hiermee kan de programmeur een JavaScript-functie uitvoeren wanneer op een element wordt geklikt. Deze gebeurtenis kan worden gebruikt voor het valideren van een formulier, waarschuwingsberichten en nog veel meer.
Met behulp van JavaScript kan deze gebeurtenis dynamisch aan elk element worden toegevoegd. Het ondersteunt alle HTML-elementen behalve , , , , , , , ,
, , En . Het betekent dat we de bij klikken evenement op de opgegeven tags.
In HTML kunnen we de bij klikken attribuut en wijs een toe JavaScript-functie ernaar. We kunnen ook JavaScript gebruiken addEventListener() methode en passeer een Klik evenement eraan voor meer flexibiliteit.
Syntaxis
Nu zien we de syntaxis van het gebruik van de bij klikken evenement in HTML en in javascript (zonder addEventListener() methode of door gebruik te maken van de addEventListener() methode).
In HTML
In JavaScript
object.onclick = function() { myScript }; In JavaScript met behulp van de addEventListener() -methode
object.addEventListener('click', myScript);
Laten we kijken hoe we het kunnen gebruiken bij klikken evenement aan de hand van enkele illustraties. Nu zullen we de voorbeelden zien van het gebruik van de bij klikken gebeurtenis in HTML en in JavaScript.
Voorbeeld1 - Gebruik van het onclick-attribuut in HTML
In dit voorbeeld gebruiken we de HTML bij klikken attribuut en er een JavaScript-functie aan toewijzen. Wanneer de gebruiker op de gegeven knop klikt, wordt de bijbehorende functie uitgevoerd en wordt er een waarschuwingsvenster op het scherm weergegeven.
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 Test het nu Uitvoer
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
Voorbeeld2 - JavaScript gebruiken
In dit voorbeeld gebruiken we JavaScript bij klikken evenement. Hier gebruiken we de bij klikken gebeurtenis met het paragraafelement.
Wanneer de gebruiker op het paragraafelement klikt, wordt de corresponderende functie uitgevoerd en wordt de tekst van de paragraaf gewijzigd. Door te klikken op de element, de achtergrondkleur, grootte, rand en kleur van de tekst worden ook gewijzigd.
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'; } Test het nu Uitvoer
Nadat u op de tekst heeft geklikt Klik hier, de uitvoer zal zijn -
typoscript elk
Voorbeeld 3: de methode addEventListener() gebruiken
In dit voorbeeld gebruiken we JavaScript addEventListener() methode om een Klik gebeurtenis toe aan het paragraafelement. Wanneer de gebruiker op het paragraafelement klikt, wordt de tekst van de paragraaf gewijzigd.
Als u op de alinea klikt, veranderen ook de achtergrondkleur en de lettergrootte van de elementen.
<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'; } Test het nu Uitvoer
Door op de tekst te klikken Klik hier , de uitvoer zal zijn -
