¿Cómo activar un evento en JavaScript?
Adjunté un evento a un cuadro de texto usando addEventListener. Funciona bien. Mi problema surgió cuando quería activar el evento mediante programación desde otra función.
¿Cómo puedo hacerlo?
Nota: el método initEvent ahora está en desuso. Otras respuestas presentan prácticas actualizadas y recomendadas.
Puede utilizar fireEvent en IE 8 o inferior, y DispatEvent del W3C en la mayoría de los demás navegadores. Para crear el evento que desea activar, puede utilizar createEvento createEventObjectsegún el navegador.
Aquí hay un fragmento de código que se explica por sí mismo (del prototipo) que activa un evento dataavailableen element:
var event; // The custom event that will be created
if(document.createEvent){
event = document.createEvent("HTMLEvents");
event.initEvent("dataavailable", true, true);
event.eventName = "dataavailable";
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventName = "dataavailable";
event.eventType = "dataavailable";
element.fireEvent("on" + event.eventType, event);
}
Un ejemplo práctico:
// Add an event listener
document.addEventListener("name-of-event", function(e) {
console.log(e.detail); // Prints "Example of an event"
});
// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
Para navegadores más antiguos con polyfill y ejemplos más complejos, consulte los documentos de MDN .
Consulte las tablas de soporte para EventTarget.dispatchEventy CustomEvent.
Si no desea utilizar jQuery y no está especialmente preocupado por la compatibilidad con versiones anteriores, simplemente utilice:
let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be
Consulte la documentación aquí y aquí .
EDITAR: Dependiendo de su configuración, es posible que desee agregar bubbles: true:
let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));
Si usas jQuery, puedes hacerlo simplemente.
$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);
y manejarlo con
$('#yourElement').on('customEventName',
function (objectEvent, [arg0, arg1, ..., argN]){
alert ("customEventName");
});
donde "[arg0, arg1, ..., argN]" significa que estos argumentos son opcionales.
