Este tutorial definirá el procedimiento sobre cómo configurar onClick con JavaScript.
Cómo configurar onClick con JavaScript
Para configurar el al hacer clic con JavaScript, hay dos métodos diferentes, que son:
- El primer método es asignar un valor al elemento HTML. al hacer clic atributo utilizando JavaScript.
- El segundo método es agregar explícitamente un detector 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 de JavaScript al hacer clic en él.
< h2 > Establecer propiedad onClick con JavaScript h2 >
< identificación del botón = 'js' > Haz click en mi botón >
En el siguiente paso se accederá al botón creado y aparecerá un “ al hacer clic El atributo ” se le adjuntará. Al hacer clic en el botón, la función especificada se ejecutará y el ' estilo.backgroundColor La propiedad ” cambiará el color del botón de la siguiente manera:
documento. getElementById ( 'js' ) . al hacer clic = función jsFunc ( ) {
documento. getElementById ( 'js' ) . estilo . color de fondo = 'Violeta' ;
}
La salida correspondiente será:
Ejemplo 2: agregar explícitamente un detector de eventos en el evento HTML
Crear un botón “ ¡Haga clic aquí! ” y asigna una identificación “ evento ” que activará el método addEventListener() en el 'hacer clic' evento:
< identificación del botón = 'evento' > haga clic aquí ! fuerte > botón fuerte >>
Obtener el botón usando su identificación y luego adjunte un “ agregarEventListener() ” método pasando un “ hacer clic 'evento y una función' eventFunc ” donde se cambiará el color de fondo del botón:
documento. getElementById ( 'evento' ) . agregarEventListener ( 'hacer clic' , eventFunc ) ;función eventFunc ( ) {
documento. getElementById ( 'evento' ) . estilo . color de fondo = '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. La primera es la forma predeterminada de agregar el atributo onclick dentro de la propia etiqueta HTML. Después de eso, también se han demostrado los dos métodos para configurar el atributo onclick con la ayuda de JavaScript.
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 clic.
- El botón ' Haz click en mi ” se accederá con su id asignado “ js ” y luego asigne un valor al atributo onclick del botón usando JavaScript.
- El botón ' ¡Haga clic aquí! Se accederá a ” usando el id “ evento ” y luego adjunte un “ agregarEventListener() ” método con él:
< identificación del botón = 'js' > Haz click en mi botón >< hermano >< hermano >
< identificación del botón = 'evento' > haga clic aquí ! botón >
La siguiente función activará el “ al hacer clic ” evento del botón “ Hacer clic ”:
función htmlFunc ( ) {alerta ( 'El botón en el que se hizo clic mediante el evento HTML onClick' ) ;
}
Al hacer clic en el “ Haz click en mi ”, se activará la siguiente función donde se mostrará un mensaje de advertencia.
documento. getElementById ( 'js' ) . al hacer clic = función jsFunc ( ) {alerta ( 'El botón en el que se hizo clic con la función onClick de JavaScript' ) ;
}
La función dada activará el botón “ ¡Haga clic aquí! ”:
documento. getElementById ( 'evento' ) . agregarEventListener ( 'hacer clic' , eventFunc ) ;función eventFunc ( ) {
alerta ( 'El botón en el que se hizo clic con JavaScript onClick con el método EventListener' ) ;
}
La salida mostrará mensajes de alerta en cada clic de botón:
Conclusión
Para configurar 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 detector de eventos en el evento HTML que verifica el ' hacer clic ' evento. Este tutorial ha definido los métodos para configurar onClick con JavaScript junto con ejemplos.