The onclick notikums parasti notiek, kad lietotājs noklikšķina uz elementa. Tas ļauj programmētājam izpildīt JavaScript funkciju, kad tiek noklikšķināts uz elementa. Šo notikumu var izmantot, lai apstiprinātu veidlapu, brīdinājuma ziņojumus un daudz ko citu.
Izmantojot JavaScript, šo notikumu var dinamiski pievienot jebkuram elementam. Tā atbalsta visus HTML elementus, izņemot , , , , , , , ,
, , un . Tas nozīmē, ka mēs nevaram piemērot onclick notikumu uz dotajiem tagiem.
HTML valodā mēs varam izmantot onclick atribūtu un piešķirt a JavaScript funkcija uz to. Mēs varam izmantot arī JavaScript addEventListener() metodi un iziet a klikšķis notikumu, lai nodrošinātu lielāku elastību.
Sintakse
Tagad mēs redzam sintaksi izmantošanai onclick notikums HTML un iekšā javascript (bez addEventListener() metodi vai izmantojot addEventListener() metode).
daudzpavedienu veidošana java
HTML formātā
JavaScript
object.onclick = function() { myScript }; JavaScript, izmantojot metodi addEventListener().
object.addEventListener('click', myScript);
Apskatīsim, kā lietot onclick notikumu, izmantojot dažas ilustrācijas. Tagad mēs redzēsim izmantošanas piemērus onclick notikumu HTML un JavaScript.
c formatēta virkne
1. piemērs — atribūta onclick izmantošana HTML
Šajā piemērā mēs izmantojam HTML onclick atribūtu un piešķirot tam JavaScript funkciju. Kad lietotājs noklikšķina uz dotās pogas, tiks izpildīta atbilstošā funkcija un ekrānā tiks parādīts brīdinājuma dialoglodziņš.
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 Izmēģiniet to tūlīt Izvade
Pēc noklikšķināšanas uz dotās pogas izvade būs -
2. piemērs — JavaScript izmantošana
Šajā piemērā mēs izmantojam JavaScript onclick notikumu. Šeit mēs izmantojam onclick notikumu ar rindkopas elementu.
Rendēt karti
Lietotājam noklikšķinot uz rindkopas elementa, tiks izpildīta atbilstošā funkcija un rindkopas teksts tiek mainīts. Noklikšķinot uz elementu, tiks mainīta arī teksta fona krāsa , izmērs, apmale un krāsa.
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'; } Izmēģiniet to tūlīt Izvade
Pēc noklikšķināšanas uz teksta Noklikšķiniet uz manis, iznākums būs -
klausieties portu
3. piemērs — metodes addEventListener() izmantošana
Šajā piemērā mēs izmantojam JavaScript addEventListener() piestiprināšanas metode a klikšķis notikumu uz rindkopas elementu. Kad lietotājs noklikšķina uz rindkopas elementa, rindkopas teksts tiek mainīts.
Noklikšķinot uz rindkopas, mainīsies arī elementu fona krāsa un fonta lielums.
<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'; } Izmēģiniet to tūlīt Izvade
Noklikšķinot uz teksta Noklikšķiniet uz manis , izvade būs -
