Saltar al contenido

Evento onclick de JavaScript – javatpoint

septiembre 23, 2021
javascript onclick event

los 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 muchos más.

Con JavaScript, este evento se puede agregar dinámicamente a cualquier elemento. Es compatible con todos los elementos HTML excepto , , ,

Sintaxis

Ahora, vemos la sintaxis de usar el al hacer clic evento en HTML y en javascript (sin addEventListener () método o utilizando el addEventListener () método).

En HTML

En JavaScript

En JavaScript mediante el método addEventListener ()

Veamos cómo usar al hacer clic evento mediante el uso de algunas ilustraciones. Ahora, veremos los ejemplos de uso de al hacer clic evento en HTML y en JavaScript.

Ejemplo 1: uso del atributo onclick en HTML

En este ejemplo, estamos usando HTML al hacer clic atributo y asignándole 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.

Este es un ejemplo del uso del atributo onclick en HTML.

Haga clic en el siguiente botón para ver el efecto.


Pruébelo ahora

Producción

Evento onclick de JavaScript

Después de hacer clic en el botón dado, la salida será:

Evento onclick de JavaScript

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.

Cuando el usuario hace clic en el elemento de 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.

Este es un ejemplo del uso del evento onclick.

Haga clic en el siguiente texto para ver el efecto.

Haga clic en mí


Pruébelo ahora

Producción

Evento onclick de JavaScript

Después de hacer clic en el texto Haz click en mi, la salida será -

Evento onclick de JavaScript

Example3 - Usando el método addEventListener ()

En este ejemplo, estamos usando JavaScript addEventListener () método para adjuntar un hacer clic evento al elemento de párrafo. Cuando el usuario hace clic en el elemento de 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.

Este es un ejemplo del uso del evento click.

Haga clic en el siguiente texto para ver el efecto.

Haga clic en mí


Pruébelo ahora

Producción

Evento onclick de JavaScript

Al hacer clic en el texto Haz click en mi, la salida será -

Evento onclick de JavaScript


close