El al hacer clic El evento generalmente ocurre cuando el usuario hace clic en un elemento. Permite al programador ejecutar una función de JavaScript cuando se hace clic en un elemento. Este evento se puede utilizar para validar un formulario, mensajes de advertencia y mucho más.
Usando JavaScript, este evento se puede agregar dinámicamente a cualquier elemento. Soporta todos los elementos HTML excepto , , , , , , , ,
, , y . Significa que no podemos aplicar la al hacer clic evento en las etiquetas dadas.
En HTML podemos utilizar el al hacer clic atribuir y asignar un Función JavaScript lo. También podemos usar JavaScript. agregarEventListener() método y pasar un hacer clic evento para mayor flexibilidad.
Sintaxis
Ahora, vemos la sintaxis del uso de al hacer clic evento en HTML y en javascript (sin agregarEventListener() método o utilizando el agregarEventListener() método).
tipos de datos java
En HTML
En JavaScript
object.onclick = function() { myScript }; En JavaScript usando el método addEventListener()
object.addEventListener('click', myScript);
Veamos cómo utilizar al hacer clic evento mediante el uso de algunas ilustraciones. Ahora, veremos los ejemplos del uso del al hacer clic evento en HTML y en JavaScript.
pyspark sql
Ejemplo 1: uso del atributo onclick en HTML
En este ejemplo, estamos usando el HTML al hacer clic atributo y asignarle una función de JavaScript. Cuando el usuario hace clic en el botón dado, se ejecutará la función correspondiente y se mostrará un cuadro de diálogo de alerta en la pantalla.
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 Pruébalo ahora Producción
Después de hacer clic en el botón indicado, el resultado será:
Ejemplo 2: uso de JavaScript
En este ejemplo, estamos usando JavaScript al hacer clic evento. Aquí estamos usando el al hacer clic evento con el elemento de párrafo.
... en java
Cuando el usuario hace clic en el elemento del párrafo, se ejecutará la función correspondiente y se cambiará el texto del párrafo. Al hacer clic en el elemento, el color de fondo, el tamaño, el borde y el color del texto también cambiarán.
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'; } Pruébalo ahora Producción
Después de hacer clic en el texto Haz click en mi, la salida será -
Cómo conseguir una paloma de caza en Android.
Ejemplo 3: uso del método addEventListener()
En este ejemplo, estamos usando JavaScript agregarEventListener() método para adjuntar un hacer clic evento al elemento de párrafo. Cuando el usuario hace clic en el elemento del párrafo, el texto del párrafo cambia.
Al hacer clic en el párrafo, el color de fondo y el tamaño de fuente de los elementos también cambiarán.
<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'; } Pruébalo ahora Producción
Al hacer clic en el texto Haz click en mi , la salida será -
