The onclick dogodek se običajno zgodi, ko uporabnik klikne element. Programerju omogoča, da izvede funkcijo JavaScript, ko klikne element. Ta dogodek je mogoče uporabiti za preverjanje obrazca, opozorilna sporočila in še veliko več.
združevanje javanskih nizov
Z uporabo JavaScripta je mogoče ta dogodek dinamično dodati kateremu koli elementu. Podpira vse elemente HTML razen , , , , , , , ,
, , in . To pomeni, da ne moremo uporabiti onclick dogodek na danih oznakah.
V HTML-ju lahko uporabimo onclick atribut in dodeli a funkcija JavaScript temu. Uporabimo lahko tudi JavaScript addEventListener() metoda in prehod a kliknite dogodek za večjo prilagodljivost.
Sintaksa
Zdaj vidimo sintakso uporabe onclick dogodek v HTML in v javascript (brez addEventListener() metodo ali z uporabo addEventListener() metoda).
V HTML
V JavaScriptu
object.onclick = function() { myScript }; V JavaScriptu z uporabo metode addEventListener().
object.addEventListener('click', myScript);
Poglejmo, kako uporabljati onclick dogodek z uporabo ilustracij. Zdaj si bomo ogledali primere uporabe onclick dogodek v HTML in JavaScript.
Primer1 - Uporaba atributa onclick v HTML
V tem primeru uporabljamo HTML onclick atribut in mu dodelite funkcijo JavaScript. Ko uporabnik klikne dani gumb, se izvede ustrezna funkcija in na zaslonu se prikaže pogovorno okno z opozorilom.
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 Preizkusite zdaj Izhod
Po kliku danega gumba bo rezultat -
niz.podniz java
Primer2 - Uporaba JavaScripta
V tem primeru uporabljamo JavaScript onclick dogodek. Tukaj uporabljamo onclick dogodek z elementom odstavka.
Ko uporabnik klikne element odstavka, se izvede ustrezna funkcija in besedilo odstavka se spremeni. Ob kliku na spremenijo se tudi barva ozadja, velikost, obroba in barva besedila.
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'; } Preizkusite zdaj Izhod
stoji
Po kliku na besedilo klikni me, rezultat bo -
shilpa shetty
Primer3 - Uporaba metode addEventListener().
V tem primeru uporabljamo JavaScript addEventListener() način pritrditve a kliknite elementu odstavka. Ko uporabnik klikne element odstavka, se besedilo odstavka spremeni.
Ko kliknete odstavek, se spremenita tudi barva ozadja in velikost pisave elementov.
<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'; } Preizkusite zdaj Izhod
S klikom na besedilo Kliknite me , izhod bo -
