El fent clic L'esdeveniment generalment es produeix quan l'usuari fa clic en un element. Permet al programador executar una funció de JavaScript quan es fa clic en un element. Aquest esdeveniment es pot utilitzar per validar un formulari, missatges d'advertència i molts més.
Mitjançant JavaScript, aquest esdeveniment es pot afegir dinàmicament a qualsevol element. Admet tots els elements HTML excepte , , , , , , , ,
, , i . Vol dir que no podem aplicar el fent clic esdeveniment a les etiquetes donades.
En HTML, podem utilitzar el fent clic atribut i assigna a Funció JavaScript a ell. També podem utilitzar JavaScript addEventListener() mètode i passa a feu clic esdeveniment per a una major flexibilitat.
matriu de bytes java a cadena
Sintaxi
Ara, veiem la sintaxi d'utilitzar el fent clic esdeveniment en HTML i en javascript (sense addEventListener() mètode o utilitzant el addEventListener() mètode).
En HTML
En JavaScript
object.onclick = function() { myScript }; A JavaScript mitjançant el mètode addEventListener().
object.addEventListener('click', myScript);
Vegem com utilitzar-lo fent clic esdeveniment mitjançant algunes il·lustracions. Ara, veurem els exemples d'ús del fent clic esdeveniment en HTML i en JavaScript.
Exemple 1: ús de l'atribut onclick en HTML
En aquest exemple, estem utilitzant el HTML fent clic atribut i assignar-li una funció de JavaScript. Quan l'usuari faci clic al botó donat, s'executarà la funció corresponent i es mostrarà un quadre de diàleg d'alerta a la pantalla.
caràcters d'escapament de java
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 Prova-ho ara Sortida
Després de fer clic al botó donat, la sortida serà -
Exemple 2: ús de JavaScript
En aquest exemple, estem utilitzant JavaScript fent clic esdeveniment. Aquí estem utilitzant el fent clic esdeveniment amb l'element paràgraf.
Quan l'usuari fa clic a l'element del paràgraf, s'executarà la funció corresponent i es canviarà el text del paràgraf. En fer clic a alfabet per nombre
element, el color de fons, la mida, la vora i el color del text també canviaran.
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'; } Prova-ho ara Sortida
Després de fer clic al text Fes clic a mi, la sortida serà -
camí establert en java
Exemple 3: utilitzant el mètode addEventListener().
En aquest exemple, estem utilitzant JavaScript addEventListener() mètode per adjuntar a feu clic esdeveniment a l'element paràgraf. Quan l'usuari fa clic a l'element del paràgraf, el text del paràgraf es modifica.
En fer clic al paràgraf, el color de fons i la mida de la lletra dels elements també canviaran.
<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'; } Prova-ho ara Sortida
En fer clic al text Feu clic a mi , la sortida serà -
