Det onclick hændelse opstår generelt, når brugeren klikker på et element. Det giver programmøren mulighed for at udføre en JavaScript-funktion, når der bliver klikket på et element. Denne begivenhed kan bruges til at validere en formular, advarselsmeddelelser og mange flere.
Ved hjælp af JavaScript kan denne hændelse føjes dynamisk til ethvert element. Det understøtter alle HTML-elementer undtagen , , , , , , , ,
, , og . Det betyder, at vi ikke kan anvende onclick begivenhed på de givne tags.
I HTML kan vi bruge onclick attribut og tildele en JavaScript funktion til det. Vi kan også bruge JavaScript addEventListener() metode og bestå en klik arrangement til det for større fleksibilitet.
Syntaks
Nu ser vi syntaksen ved at bruge onclick begivenhed i HTML og in javascript (uden addEventListener() metode eller ved at bruge addEventListener() metode).
I HTML
I JavaScript
object.onclick = function() { myScript }; I JavaScript ved at bruge addEventListener() metoden
object.addEventListener('click', myScript);
Lad os se, hvordan du bruger onclick begivenhed ved at bruge nogle illustrationer. Nu vil vi se eksempler på brug af onclick begivenhed i HTML og i JavaScript.
Eksempel 1 - Brug af onclick-attribut i HTML
I dette eksempel bruger vi HTML onclick attribut og tildele en JavaScript-funktion til den. Når brugeren klikker på den givne knap, vil den tilsvarende funktion blive udført, og en advarselsdialogboks vises på skærmen.
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 det nu Produktion
Efter at have klikket på den givne knap, vil outputtet være -
Eksempel 2 - Brug af JavaScript
I dette eksempel bruger vi JavaScript onclick begivenhed. Her bruger vi onclick hændelse med afsnitselementet.
Når brugeren klikker på afsnitselementet, vil den tilsvarende funktion blive udført, og teksten i afsnittet bliver ændret. Ved at klikke på element, vil baggrundsfarven, størrelsen, rammen og farven på teksten også blive ændret.
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 det nu Produktion
Efter at have klikket på teksten Klik på mig, outputtet bliver -
Eksempel 3 - Brug af addEventListener() metoden
I dette eksempel bruger vi JavaScript addEventListener() metode til at vedhæfte en klik hændelse til afsnitselementet. Når brugeren klikker på afsnitselementet, ændres teksten i afsnittet.
Når du klikker på afsnittet, ændres baggrundsfarven og skriftstørrelsen på elementerne også.
<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 det nu Produktion
Ved at klikke på teksten Klik på mig , vil outputtet være -
