JavaScript onclick -tapahtuma
The klikkaamalla tapahtuma tapahtuu yleensä, kun käyttäjä napsauttaa elementtiä. Sen avulla ohjelmoija voi suorittaa JavaScriptin toiminnon, kun elementtiä napsautetaan. Tätä tapahtumaa voidaan käyttää lomakkeen, varoitusviestien ja monien muiden vahvistamiseen.
JavaScriptin avulla tämä tapahtuma voidaan lisätä dynaamisesti mihin tahansa elementtiin. Se tukee kaikkia HTML-elementtejä paitsi , , , , , , , ,
, , ja . Se tarkoittaa, että emme voi soveltaa klikkaamalla tapahtuma annetuilla tunnisteilla.
HTML:ssä voimme käyttää klikkaamalla määritä ja määritä a JavaScript-toiminto siihen. Voimme myös käyttää JavaScriptiä addEventListener() menetelmä ja pass a klikkaus tapahtuman joustavuuden lisäämiseksi.
Syntaksi
Nyt näemme käytön syntaksin klikkaamalla tapahtuma HTML:ssä ja in javascript (ilman addEventListener() menetelmällä tai käyttämällä addEventListener() menetelmä).
HTML:ssä
JavaScriptissä
object.onclick = function() { myScript }; JavaScriptissä käyttämällä addEventListener()-metodia
object.addEventListener('click', myScript);
Katsotaan kuinka käyttää klikkaamalla tapahtumaa käyttämällä joitain kuvia. Nyt näemme esimerkkejä käytöstä klikkaamalla tapahtuma HTML:ssä ja JavaScriptissä.
Esimerkki 1 - Onclick-attribuutin käyttö HTML:ssä
Tässä esimerkissä käytämme HTML klikkaamalla attribuutti ja määrittämällä sille JavaScript-funktio. Kun käyttäjä napsauttaa annettua painiketta, vastaava toiminto suoritetaan ja näytölle tulee hälytysvalintaikkuna.
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 Testaa nyt Lähtö
Kun napsautat annettua painiketta, tulos on -
Esimerkki2 - JavaScriptin käyttö
Tässä esimerkissä käytämme JavaScriptiä klikkaamalla tapahtuma. Tässä käytämme klikkaamalla tapahtuma kappaleelementillä.
Kun käyttäjä napsauttaa kappaleelementtiä, vastaava toiminto suoritetaan ja kappaleen teksti muuttuu. Napsauttamalla
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'; } Testaa nyt Lähtö
Tekstin napsautuksen jälkeen Napsauta minua, lähtö tulee olemaan -
Esimerkki3 - AddEventListener()-menetelmän käyttäminen
Tässä esimerkissä käytämme JavaScriptiä addEventListener() tapa liittää a klikkaus tapahtuma kappaleelementtiin. Kun käyttäjä napsauttaa kappaleelementtiä, kappaleen teksti muuttuu.
Kappaletta napsauttaessa myös elementtien taustaväri ja fonttikoko muuttuvat.
<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'; } Testaa nyt Lähtö
Napsauttamalla tekstiä Napsauta minua , tulos on -
