Cómo activar el evento de clic en JavaScript

Mientras se programamos en JavaScript, a menudo encontramos situaciones en las que queremos invocar cualquier función al hacer clic en el botón. Por ejemplo, en el caso de las pruebas de automatización, debe probar alguna funcionalidad adicional de una página web o un sitio. En tales escenarios, la técnica de activar eventos de clic en JavaScript se vuelve muy útil y eficiente para contrarrestar los desafíos declarados.

Este artículo lo guiará sobre el procedimiento para activar los eventos de clic en JavaScript.

Cómo activar el evento de clic en JavaScript?

Para activar el evento de clic en JavaScript, aplique las siguientes técnicas:

• "hacer clic()" método
• "addEventListener ()" y "DispatchEvent ()" métodos

Ahora, demostraremos el uso de los métodos mencionados anteriormente uno por uno!

Método 1: activar el evento de clic en JavaScript usando el método Click ()

El "hacer clic()El método se utiliza para realizar un clic en el elemento especificado. Este método se puede implementar creando un botón, obteniendo su ID y activando el evento de clic cuando se hace clic en el botón usando una función definida por el usuario.

Realice el siguiente ejemplo para la demostración.

Ejemplo
En el siguiente ejemplo, se agregará un botón con tener "Haz click en mi"Como su identificación y su evento OnClick asociado, que accederá al"clickevent ()" función:

Haz click en mi

En el código JavaScript, acceda al botón creado especificando su ID en el documento.método getElementById (). Después de eso, se invocará el método "Click ()" para realizar la operación adicional:

const get = documento.getElementById ('btn');
conseguir.hacer clic();

Finalmente, defina la función llamada "clickevent ()"De tal manera que imprima el siguiente mensaje en la consola cuando se haga clic en el botón usando el"hacer clic()" método:

función clicKevent ()
consola.Registro ("Haga clic en Evento activado")

La salida de la implementación anterior dará como resultado la siguiente:

En la salida anterior, se observa que el botón "Haz click en mi"Se hace clic de manera automatizada utilizando el"hacer clic()" método. Mientras tanto, se accede a la función clicKevent () y el mensaje especificado se registra en la consola.

Método 2: activar el evento de clic en JavaScript utilizando los métodos "AddEventListener ()" y "DispatchEvent ()"

El "addEventListener ()"El método adjunta un controlador de eventos a un objeto DOM y el"DispatchEvent ()El método "envía el evento especificado al objeto. Estos métodos se pueden usar en combinación para crear un nuevo objeto de evento y ejecutar el evento de clic con la ayuda de la función especificada.

Sintaxis

documento.addEventListener (evento, función)

En la sintaxis anterior, "evento"Se refiere al evento especificado y"función”Es la función en la que se aplicará el evento.

DispatchEvent (evento)

Aquí, "evento"Se refiere al objeto de evento seleccionado que debe enviarse.

Descripción general el siguiente ejemplo.

Ejemplo
El primer paso es incluir un botón con una ID, un evento OnClick y un valor como se discutió en el método anterior:

Haz click en mi

Luego, obtenga el botón y agregue el evento "hacer clic" utilizando el "addEventListener ()"Método y especificar"mi"En su argumento que se refiere al objeto del evento (haga clic). Entonces el "DispatchEvent ()"El método enviará el evento de clic a un objeto llamado"Evento"Como se demostró:

const get = documento.getElementById ('btn');
conseguir.addEventListener ('hacer clic', e => );
conseguir.DispatchEvent (nuevo evento ('hacer clic'));

Por último, defina la misma función clicKevent () que se indica en el método anterior para mostrar el mensaje correspondiente cuando el "hacer clicSe activa el evento:

función clicKevent ()
consola.Registro ("Haga clic en Evento activado")

Producción

Hemos compilado diferentes métodos para activar eventos de clic en JavaScript.

Conclusión

Para activar los eventos de clic en JavaScript, el "hacer clic()El método se puede aplicar para obtener el botón e invocar la función agregada en consecuencia. También el "addEventListener ()" y "DispatchEvent ()Los métodos se pueden utilizar para incluir un evento específico y enviarlo a un objeto recién creado. Este artículo demostró los métodos para activar los eventos de clic en JavaScript.