De ved trykk hendelse oppstår vanligvis når brukeren klikker på et element. Den lar programmereren utføre en JavaScript-funksjon når et element blir klikket. Denne hendelsen kan brukes til å validere et skjema, advarselsmeldinger og mange flere.
Ved å bruke JavaScript kan denne hendelsen legges dynamisk til ethvert element. Den støtter alle HTML-elementer unntatt , , , , , , , ,
, , og . Det betyr at vi ikke kan bruke ved trykk hendelse på de gitte taggene.
I HTML kan vi bruke ved trykk attributt og tilordne en JavaScript-funksjon til det. Vi kan også bruke JavaScript addEventListener() metode og bestå en klikk arrangement til det for større fleksibilitet.
Syntaks
Nå ser vi syntaksen for å bruke ved trykk hendelse i HTML og in javascript (uten addEventListener() metode eller ved å bruke addEventListener() metode).
I HTML
I JavaScript
object.onclick = function() { myScript }; I JavaScript ved å bruke addEventListener()-metoden
object.addEventListener('click', myScript);
La oss se hvordan du bruker ved trykk begivenhet ved å bruke noen illustrasjoner. Nå vil vi se eksempler på bruk av ved trykk hendelse i HTML og JavaScript.
Eksempel 1 – Bruk av onclick-attributt i HTML
I dette eksemplet bruker vi HTML ved trykk attributt og tilordne en JavaScript-funksjon til den. Når brukeren klikker på den angitte knappen, vil den tilsvarende funksjonen bli utført, og en varseldialogboks vises på skjermen.
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 nå Produksjon
Etter å ha klikket på den gitte knappen, vil utgangen være -
Eksempel 2 - Bruk av JavaScript
I dette eksemplet bruker vi JavaScript ved trykk begivenhet. Her bruker vi ved trykk hendelse med avsnittselementet.
Når brukeren klikker på avsnittselementet, vil den tilsvarende funksjonen bli utført, og teksten i avsnittet endres. Ved å klikke på element, vil bakgrunnsfargen , størrelsen, rammen og fargen på teksten også endres.
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 nå Produksjon
Etter å ha klikket på teksten Klikk på meg, utgangen vil være -
Eksempel 3 - Bruk av addEventListener()-metoden
I dette eksemplet bruker vi JavaScript addEventListener() metode for å feste en klikk hendelse til avsnittselementet. Når brukeren klikker på avsnittselementet, endres teksten i avsnittet.
Når du klikker på avsnittet, endres også bakgrunnsfargen og skriftstørrelsen til elementene.
<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 nå Produksjon
Ved å klikke på teksten Klikk på meg , vil utgangen være -
