¿Cómo activar un evento en JavaScript?

He adjuntado un evento a un cuadro de texto usando addEventListener. Funciona bien. Mi problema surgió cuando quise activar el evento mediante programación desde otra función.

¿Cómo puedo hacerlo?

Puede usar fireEvent en IE 8 o inferior, y dispatchEvent de W3C en la mayoría de los otros navegadores. Para crear el evento que desea activar, puede usar cualquiera createEvento createEventObjectdependiendo del navegador.

Aquí hay una pieza de código que se explica por sí mismo (del prototipo) que dispara un evento dataavailableen un 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 de trabajo:

// 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 los polyfill de navegadores más antiguos y ejemplos más complejos, consulte los documentos de MDN .

Ver tablas de soporte para EventTarget.dispatchEventy CustomEvent.

Si no desea usar jQuery y no está especialmente preocupado por la compatibilidad con versiones anteriores, simplemente use:

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

Vea la documentación aquí y aquí .

EDITAR: Dependiendo de su configuración, puede agregar bubbles: true:

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

si usas jQuery, puedes simplemente hacer

$('#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.

Si es compatible con IE9 +, puede usar lo siguiente. El mismo concepto está incorporado en You Might Not Need jQuery .

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}

function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

// Add an event listener.
addEventListener(document, 'customChangeEvent', function(e) {
  document.body.innerHTML = e.detail;
});

// Trigger the event.
triggerEvent(document, 'customChangeEvent', {
  detail: 'Display on trigger...'
});

Si ya está utilizando jQuery, aquí está la versión jQuery del código anterior.

$(function() {
  // Add an event listener.
  $(document).on('customChangeEvent', function(e, opts) {
    $('body').html(opts.detail);
  });

  // Trigger the event.
  $(document).trigger('customChangeEvent', {
    detail: 'Display on trigger...'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Busqué eventos de clic de disparo, mousedown y mouseup en mouseover usando JavaScript. Encontré una respuesta proporcionada por Juan Mendes . Para la respuesta haz clic aquí .

Haga clic aquí para ver la demostración en vivo y debajo está el código:

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Solo para sugerir una alternativa que no implique la necesidad de invocar manualmente un evento de escucha:

Independientemente de lo que haga su escucha de eventos, muévalo a una función y llame a esa función desde la escucha de eventos.

Luego, también puede llamar a esa función en cualquier otro lugar que necesite para lograr lo mismo que hace el evento cuando se dispara.

Encuentro esto menos "intensivo en código" y más fácil de leer.

Acabo de usar lo siguiente (parece ser mucho más simple):

element.blur();
element.focus();

En este caso, el evento se desencadena solo si el valor realmente cambió, tal como lo desencadenaría la pérdida de foco normal realizada por el usuario.

La respuesta de @ Dorian modificada para trabajar con IE:

document.addEventListener("my_event", function(e) {
  console.log(e.detail);
});

var detail = 'Event fired';

try {

    // For modern browsers except IE:
    var event = new CustomEvent('my_event', {detail:detail});

} catch(err) {

  // If IE 11 (or 10 or 9...?) do it this way:

    // Create the event.
    var event = document.createEvent('Event');
    // Define that the event name is 'build'.
    event.initEvent('my_event', true, true);
    event.detail = detail;

}

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

VEA TAMBIÉN:
https://caniuse.com/#feat=customevent

La respuesta aceptada no funcionó para mí, ninguno de los createEvent sí.

Lo que funcionó para mí al final fue:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

Aquí hay un fragmento:

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`I was accessed via the other button! A ${event.type} occurred!`);
});

<button class="clickme">Click me</button>

<button class="viame">Via me</button>

De la lectura: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

Podrías usar esta función que compilé juntos.

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + ' fired!'});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent('HTMLEvents');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent('on'+event.eventType, event);
            }
        }
    }
  }

Activa un evento a continuación:

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

Ver evento:

dest.addEventListener('focus', function(e){
   console.log(e);
});

¡Espero que esto ayude!

Puede usar el siguiente código para disparar eventos usando el método Element:

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

var input = document.getElementById("my_input");
var button = document.getElementById("my_button");

input.addEventListener('change', function (e) {
    alert('change event fired');
});
button.addEventListener('click', function (e) {
    input.value = "Bye World";
    input.triggerEvent("change");
});

<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>

La forma más eficiente es llamar a la misma función que se ha registrado con addEventListener directamente.

También puede desencadenar un evento falso con CustomEvent y co.

Finalmente, algunos elementos como el <input type="file">soporte de un .click()método.

var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

esto desencadenará de inmediato un evento 'beforeinstallprompt'

Use jquery event call. Escriba la línea a continuación donde desea activar onChange de cualquier elemento.

$("#element_id").change();

element_id es el ID del elemento cuyo onChange desea activar.

Evitar el uso de

 element.fireEvent("onchange");

Porque tiene muy menos apoyo. Consulte este documento para su apoyo .

HTML

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

JS

// click event listener of the link element --------------  
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById('myLink').click();      // script calls the "click" event of the link element 
}

Lo que quieres es algo como esto:

document.getElementByClassName("example").click();

Usando jQuery, sería algo como esto:

$(".example").trigger("click");