The onclick evenimentul are loc în general atunci când utilizatorul face clic pe un element. Permite programatorului să execute o funcție JavaScript atunci când se face clic pe un element. Acest eveniment poate fi folosit pentru validarea unui formular, mesaje de avertizare și multe altele.
Folosind JavaScript, acest eveniment poate fi adăugat dinamic la orice element. Acceptă toate elementele HTML, cu excepția , , , , , , , ,
, , și . Înseamnă că nu putem aplica onclick eveniment pe etichetele date.
În HTML, putem folosi onclick atribut și atribui a Funcția JavaScript la ea. Putem folosi și JavaScript addEventListener() metoda si trece a clic eveniment la acesta pentru o mai mare flexibilitate.
Sintaxă
Acum, vedem sintaxa utilizării onclick eveniment în HTML și în javascript (fără addEventListener() metoda sau folosind metoda addEventListener() metodă).
În HTML
În JavaScript
object.onclick = function() { myScript }; În JavaScript, folosind metoda addEventListener().
object.addEventListener('click', myScript);
Să vedem cum se folosește onclick eveniment prin utilizarea unor ilustrații. Acum, vom vedea exemplele de utilizare onclick eveniment în HTML și în JavaScript.
Exemplul 1 - Utilizarea atributului onclick în HTML
În acest exemplu, folosim HTML onclick atribut și atribuirea unei funcții JavaScript. Când utilizatorul face clic pe butonul dat, funcția corespunzătoare va fi executată și o casetă de dialog de alertă va fi afișată pe ecran.
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 Testează-l acum Ieșire
După ce faceți clic pe butonul dat, rezultatul va fi -
toate majusculele comandă excel
Exemplul 2 - Utilizarea JavaScript
În acest exemplu, folosim JavaScript onclick eveniment. Aici folosim onclick eveniment cu elementul paragraf.
mylivecriclet
Când utilizatorul face clic pe elementul paragraf, funcția corespunzătoare va fi executată, iar textul paragrafului este modificat. Făcând clic pe elementul, culoarea de fundal, dimensiunea, chenarul și culoarea textului se vor schimba și ele.
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'; } Testează-l acum Ieșire
După ce faceți clic pe text Click pe mine, ieșirea va fi -
Exemplul 3 - Utilizarea metodei addEventListener().
În acest exemplu, folosim JavaScript addEventListener() metoda de a atasa a clic eveniment la elementul paragraf. Când utilizatorul face clic pe elementul paragraf, textul paragrafului se modifică.
Făcând clic pe paragraf, culoarea de fundal și dimensiunea fontului elementelor se vor schimba.
<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'; } Testează-l acum Ieșire
Făcând clic pe text Click pe mine , ieșirea va fi -
