En el desarrollo web, a menudo necesitamos simular interacciones del usuario mediante programación. A continuación, exploraremos cómo activar eventos de JavaScript de forma programática.

// Función para activar evento mouseover
function activarMouseOver(selector) {
  const elementoDestino = document.querySelector(selector);
  if (document.createEvent) {
    const evento = document.createEvent('MouseEvents');
    evento.initEvent('mouseover', true, false);
    elementoDestino.dispatchEvent(evento);
  } else if (document.createEventObject) {
    // Compatibilidad con IE
    elementoDestino.fireEvent('onmouseover');
  }
}

// Función para activar evento focus
function activarFocus(selector) {
  const elementoDestino = document.querySelector(selector);
  if (document.createEvent) {
    const evento = document.createEvent('HTMLEvents');
    evento.initEvent('focus', true, false);
    elementoDestino.dispatchEvent(evento);
  } else if (document.createEventObject) {
    // Compatibilidad con IE
    elementoDestino.fireEvent('focus');
  }
}

1. document.createEvent(tipoEvento) Este método permite crear eventos en el DOM. Acepta un parámetro que especifica el tipo de evento:

Después de crear un evento con document.createEvent, debes enicializarlo antes de poder activarlo:

// Eventos genéricos Events y HTMLEvents
evento.initEvent('tipo', burbujea, cancelable);
// UIEvents
evento.initUIEvent('tipo', burbujea, cancelable, objetoVentana, detalle);
//MouseEvents
evento.initMouseEvent('tipo', burbujea, cancelable, objetoVentana, detalle, pantallaX, pantallaY, clienteX, clienteY, ctrlKey, altKey, shiftKey, metaKey, boton, objetivoRelacionado);
//MutationEvents
evento.initMutationEvent('tipo', burbujea, cancelable, nodoRelacionado, valorPrevio, valorNuevo, nombreAtributo, cambioAtributo);

// Activar el evento en el elemento destino
// Para IE 5.5+ se debe utilizar el método fireEvent
elementoDestino.dispatchEvent(evento);

Ejemplo: Activando un evento mouseover

1. Activando un evento click

// Usando el tipo genérico para crear un evento click
const evento = document.createEvent('Events');
evento.initEvent('click', true, false);
const elementoDestino = document.getElementById('algunID');
elementoDestino.dispatchEvent(evento);

// Usando MouseEvents para crear un evento click
const evento = document.createEvent('MouseEvents');
evento.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
const elementoDestino = document.getElementById('algunID');
elementoDestino.dispatchEvent(evento);

2. Activando un evento mouseover con compatibilidad IE

const elementoDestino = document.getElementById('algunID');

if (document.createEvent) {
    const evento = document.createEvent('MouseEvents');
    evento.initEvent('mouseover', true, false);
    elementoDestino.dispatchEvent(evento);
} else if (document.createEventObject) {
    // Compatibilidad con IE
    elementoDestino.fireEvent('onmouseover');
}