Cómo configurar OnClick con JavaScript

Un evento es una acción tomada por un navegador o un usuario. El concepto de JavaScript de manipuladores o oyentes de eventos se puede utilizar para manejar estos eventos. Un cierto evento desencadena la ejecución de un oyente de eventos. Uno de estos oyentes de eventos es "al hacer clic."Cuando un usuario hace clic en un elemento, se activa o ejecuta a un oyente de eventos de OnClick.

Este tutorial definirá el procedimiento sobre cómo configurar en el cierre de JavaScript.

Cómo configurar OnClick con JavaScript

Para establecer el al hacer clic Con JavaScript, hay dos métodos diferentes, que son:

• El primer método es asignar un valor a los elementos HTML al hacer clic atributo usando JavaScript.
• El segundo método es agregar explícitamente un oyente de eventos en el evento HTML que verifica el "hacer clic" evento.

Ejemplo 1: Asigne un valor al atributo OnClick del elemento HTML usando JavaScript

En el archivo HTML, cree un encabezado y un botón "Haz click en mi"Con la identificación"js"Que activará la función JavaScript al hacer clic en ella.

Establezca la propiedad OnClick con JavaScript

Haz click en mi

En el siguiente paso, se accederá al botón creado y un "al hacer clicEl atributo se adjuntará. En el clic del botón, se ejecutará la función especificada y el "estilo.color de fondoLa propiedad cambiará el color del botón de la siguiente manera:

documento.GetElementById ("JS").onClick = function jsfunc ()
documento.GetElementById ("JS").estilo.backgroundColor = "Purple";

La salida correspondiente será:

Ejemplo 2: Agregue explícitamente un oyente de eventos en el evento HTML

Crear un botón "haga clic aquí!"Y asigna una identificación"evento"A él que activará el método addEventListener () en el "hacer clic" evento:

haga clic aquí!botón>

Obtener el botón usando su identificación y luego adjunte un "addEventListener ()"Método al pasar un"hacer clic"Evento y una función"eventfunc"Donde se cambiará el color de fondo del botón:

documento.getElementById ("Evento").addEventListener ("hacer clic", eventfunc);
función eventfunc ()
documento.getElementById ("Evento").estilo.backgroundColor = "verde";

Producción

Ejemplo 3: Uso de todos los métodos OnClick a la vez

En este ejemplo, el funcionamiento de todos los métodos se mostrará a la vez. Primero es la forma predeterminada de agregar el atributo OnClick dentro de la etiqueta HTML en sí. Después de eso, los dos métodos para establecer el atributo OnClick con la ayuda de JavaScript también se han demostrado.

En el siguiente ejemplo, cree tres botones y vea la funcionalidad del atributo OnClick.

• El primer botón "Hacer clic"Llamará al"htmlfunc ()"En el evento de clics.
• El botón "Haz click en mi"Se accederá con su identificación asignada"js"Y luego asigne un valor al atributo OnClick del botón usando JavaScript.
• El botón "haga clic aquí!Se accederá a la identificación "evento"Y luego adjunte un"addEventListener ()"Método con él:

Hacer clic


Haz click en mi


haga clic aquí!

La siguiente función activará el "al hacer clic"Evento del botón"Hacer clic":

función htmlfunc ()
alerta ("El botón hecho por HTML OnClick Event");

Al hacer clic en el "Haz click en mi"Botón, la siguiente función se activará donde se mostrará un mensaje de advertencia.

documento.GetElementById ("JS").onClick = function jsfunc ()
alerta ("el botón hecho hecho por la función JavaScript onClick");

La función dada activará el botón "haga clic aquí!":

documento.getElementById ("Evento").addEventListener ("hacer clic", eventfunc);
función eventfunc ()
alerta ("el botón hecho hecho por JavaScript onClick con el método de eventlistener");

La salida mostrará mensajes de alerta en cada botón Haga clic:

Conclusión

Para establecer el OnClick con JavaScript, hay dos enfoques diferentes, el primero es asignar un valor al atributo OnClick del elemento HTML usando JavaScript y el segundo enfoque es agregar explícitamente un oyente de eventos en el evento HTML que verifica el ""hacer clic" evento. Este tutorial ha definido los métodos para establecer en el cierre de JavaScript junto con ejemplos.