The paspaudus įvykis paprastai įvyksta, kai vartotojas spusteli elementą. Tai leidžia programuotojui vykdyti „JavaScript“ funkciją, kai elementas paspaudžiamas. Šis įvykis gali būti naudojamas patvirtinant formą, įspėjamuosius pranešimus ir daug daugiau.
Naudojant JavaScript, šį įvykį galima dinamiškai pridėti prie bet kurio elemento. Jis palaiko visus HTML elementus, išskyrus , , , , , , , ,
, , ir . Tai reiškia, kad negalime taikyti paspaudus įvykis nurodytose žymose.
HTML galime naudoti paspaudus priskirti ir priskirti a JavaScript funkcija prie jo. Taip pat galime naudoti JavaScript addEventListener() metodas ir perduoti a spustelėkite įvykį, kad būtų didesnis lankstumas.
papildiklis pilnas
Sintaksė
Dabar matome naudojimo sintaksę paspaudus įvykis HTML ir in javascript (be addEventListener() metodu arba naudojant addEventListener() metodas).
HTML
„JavaScript“.
object.onclick = function() { myScript }; JavaScript naudojant addEventListener() metodą
object.addEventListener('click', myScript);
Pažiūrėkime, kaip naudoti paspaudus įvykis naudojant keletą iliustracijų. Dabar pamatysime naudojimo pavyzdžius paspaudus įvykis HTML ir JavaScript.
1 pavyzdys – atributo onclick naudojimas HTML
Šiame pavyzdyje mes naudojame HTML paspaudus atributą ir priskirdami jam JavaScript funkciją. Kai vartotojas spustelėja nurodytą mygtuką, bus vykdoma atitinkama funkcija, o ekrane pasirodys įspėjimo dialogo langas.
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 Išbandykite dabar Išvestis
Spustelėjus nurodytą mygtuką, išvestis bus -
2 pavyzdys – JavaScript naudojimas
Šiame pavyzdyje mes naudojame JavaScript paspaudus įvykis. Čia mes naudojame paspaudus įvykis su pastraipos elementu.
Kai vartotojas spusteli pastraipos elementą, bus vykdoma atitinkama funkcija, o pastraipos tekstas pasikeis. Spustelėjus elementas, fono spalva , dydis, kraštinė ir teksto spalva taip pat pasikeis.
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'; } Išbandykite dabar Išvestis
Paspaudus tekstą Paspausk mane, išėjimas bus -
3 pavyzdys – metodo addEventListener() naudojimas
Šiame pavyzdyje mes naudojame JavaScript addEventListener() būdas pritvirtinti a spustelėkite įvykį pastraipos elementui. Kai vartotojas spusteli pastraipos elementą, pastraipos tekstas pasikeičia.
Spustelėjus pastraipą, taip pat pasikeis elementų fono spalva ir šrifto dydis.
<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'; } Išbandykite dabar Išvestis
Spustelėjus tekstą Paspausk mane , išvestis bus -
