Activar evento de clic en JavaScript

1. Activar evento de clic en JavaScript usando click()
2. Activar evento de clic en JavaScript usando addEventListener()

El objeto ventana es uno de los objetos más importantes utilizados para comunicarse con el navegador. Representa la ventana del navegador. Todas las variables y funciones globales se convierten en miembros del objeto ventana. El objeto Window-Location se usa para obtener la URL de la página actual y también para cambiar la URL de la redirección.

El artículo de hoy muestra cómo desencadenar un evento de clic en JavaScript.

Activar evento de clic en JavaScript usando click()

Este es un evento integrado proporcionado por JavaScript. Un elemento recibe el evento de clic cuando se presiona y se suelta una tecla en el dispositivo señalador (por ejemplo, el botón izquierdo del mouse) mientras el puntero está dentro del elemento.

click() se activa después de que los eventos del mouse hacia arriba y hacia abajo se activen en ese orden. Puede encontrar más información sobre la función click en la documentación del método click().

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

const link = document.getElementById('btn');
for (let i = 0; i < 5; i++) {
  link.click();
}
function openGoogleByMethod() {
  console.log('Event triggered')
}

Extraemos el elemento utilizando el ID del elemento en el ejemplo anterior y aplicamos el evento Click a un elemento. Si desea ejecutar un evento de clic automatizado más de una vez, puede escribir el bucle for y llamar a target.click() dentro del bucle for. Invoca automáticamente el clic del botón hasta que el contador alcanza su valor máximo y emite el Triggered event 5 veces.

Producción :

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"

Activar evento de clic en JavaScript usando addEventListener()

Este es un método integral proporcionado por la interfaz de destino de eventos de JavaScript. Este método registra un detector de eventos. Cada vez que el evento especificado se captura en el objetivo, se llama a nuestra función configurada.

Sintaxis

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

• $type es un parámetro obligatorio que acepta solo una cadena que indica el tipo de evento a monitorear. Es un parámetro que distingue entre mayúsculas y minúsculas. Admite varios eventos como click, keyboard, input, database, etc. $listener es un parámetro obligatorio. Cuando ocurre un evento del tipo especificado, este parámetro como objeto recibe una notificación al respecto. Este objeto debe implementar la interfaz EventListener o una función de JavaScript.
• $options es un parámetro opcional. Este parámetro especifica las propiedades del detector de eventos. Algunas propiedades son capture, once, passive, y signal. $useCapture es un parámetro opcional. Este parámetro acepta valores booleanos. Los eventos de este tipo se enviarán primero a un EventTarget en la parte inferior del árbol DOM o no se decidirá por este valor booleano. Si es verdadero, este evento se envía primero al agente de escucha registrado y luego a EventTarget.

Puede encontrar más información sobre la función addEventListener en la documentación del método addEventListener().

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

const link = document.getElementById('btn');
link.addEventListener('click', e => {});
for (let i = 0; i < 5; i++) {
  link.dispatchEvent(new Event('click'));
}
function openGoogleByMethod() {
  console.log('Event triggered')
}

En el ejemplo anterior, extraemos el elemento utilizando el ID del elemento y agregamos una lista para el evento Click en un elemento. Si desea ejecutar un evento de clic automático más de una vez, puede escribir for loop e ingresar el método target.DispatchEvent (new Event('click')) dentro del bucle for. dispatchEvent es el método EventTarget que distribuye el objeto de evento seguido por el detector de eventos. Esto enviará automáticamente el evento de clic del botón hasta que el contador alcance su valor máximo e imprima el Triggered Event 5 veces.

Producción :

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"