How to trigger event in JavaScript?

Question

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function.

How can I do it?

Metalepsis

Please change the accepted answer to this, it's more up-to-date. – Nitriding

@RickyStam It looks like that MDN article moved to here – Bohunk

Answer 1

Note: the initEvent method is now deprecated. Other answers feature up-to-date and recommended practice.

---

You can use fireEvent on IE 8 or lower, and W3C's dispatchEvent on most other browsers. To create the event you want to fire, you can use either createEvent or createEventObject depending on the browser.

Here is a self-explanatory piece of code (from prototype) that fires an event dataavailable on an 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);
}

Arlie

Dont't forget that only the IE version has the 'on' in front (I missed that at first) – Baksheesh

What does the variable eventName contain here? – Artificer

@Arlie how can I attach my event handler to this custom event? – Geosphere

dataavailable should be in the eventName variable I believe. – Crenelate

Yep dataavailable should be in eventName and memo should be defined too (define to {} is ok). – Packthread

I think the question is: where does eventName come from? In this code it is undefined. Should it be "dataavailable"? If so, please edit the answer. – Viscose

Internet Explorer 9+ handles createEvent and dispatchEvent, so there is no need for those if statements. – Crofter

This example doesn't even works, see my answer: https://mcmap.net/q/49314/-how-to-trigger-event-in-javascript – Askew

I am confused on whether this is a cross-browser technique. Is it? – Pyriphlegethon

fireEvent on IE what verison of IE it supports? – Podgy

Looks like the process for creating custom events might change at some point - see the MDN article for more details. But for now this answer worked fine for me, so thanks! – Stentor

The last lines have to call document.dispatchEvent and document.fireEvent respectively. – Coumarone

document.createEvent seems to be deprecated in favor of new Event: developer.mozilla.org/en-US/docs/Web/API/Document/createEvent – Nectar

does not work on ie11 via virtualbox on mac host: github.com/lingtalfi/browsers-behaviours/blob/master/… – Repute

or: $(selector).change(); – Shindig

@CiroSantilli郝海东冠状病六四事件法轮功 Document.createEvent() isn’t deprecated, but Event.initEvent() is, see MDN. – Picky

Answer 2

A working example:

// 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);

For older browsers polyfill and more complex examples, see MDN docs.

See support tables for EventTarget.dispatchEvent and CustomEvent.

Askew

One thing to add: if there should be a know-typed event (like TransitionEvent, ClipboardEvent, etc) the appropriate constructor could be called. – Tooth

Won't work with any version of IE (caniuse.com/#feat=customevent). See my answer for a fix. – Caylacaylor

Note to future readers, detail is a property of the Event, so assign any data you want to access at the other end to it and access by event.detail. +1 – Musca

Answer 3

If you don't want to use jQuery and aren't especially concerned about backwards compatibility, just use:

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

See the documentation here and here.

EDIT: Depending on your setup you might want to add bubbles: true:

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

Metamer

This should be the accepted answer as it doesn't use deprecated methods like initEvent() – Kaiserism

Nice solution, but be aware this will not work on IE11. You should then use CustomEvent and the according polyfill. – Forsberg

Answer 4

if you use jQuery, you can simple do

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

and handle it with

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

where "[arg0, arg1, ..., argN]" means that these args are optional.

Stood

Answer 5

Note: the initCustomEvent method is now deprecated. Other answers feature up-to-date and recommended practice.

---

If you are supporting IE9+ the you can use the following. The same concept is incorporated in 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...'
});

---

If you are already using jQuery, here is the jQuery version of the code above.

$(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>

Maeganmaelstrom

This will not work for any version of IE, as a window.CustomEvent exists but it cannot be called as a constructor: caniuse.com/#search=CustomEvent ;) – Egress

Answer 6

I searched for firing click, mousedown and mouseup event on mouseover using JavaScript. I found an answer provided by Juan Mendes. For the answer click here.

Click here is the live demo and below is the code:

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);
    }
};

Carmoncarmona

Answer 7

The accepted answer didn’t work for me, none of the createEvent ones did.

What worked for me in the end was:

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

Here’s a snippet:

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>

From reading: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Nonproductive

Answer 8

Modified @Dorian's answer to work with 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/

SEE ALSO:
https://caniuse.com/#feat=customevent

Caylacaylor

in your comment "For modern browsers except IE" I guess "except IE" is redundant ;) – Hofmann

May I ask why global var and not local let and const? The code may fail on second call even. – Abdominal

Answer 9

Just to suggest an alternative that does not involve the need to manually invoke a listener event:

Whatever your event listener does, move it into a function and call that function from the event listener.

Then, you can also call that function anywhere else that you need to accomplish the same thing that the event does when it fires.

I find this less "code intensive" and easier to read.

Rushy

What if you want to do multiple different things for the same event (or well, callback function in your case) depending on context? :) It's a good alternative but this feels more like a comment than an answer as the OP wants to know how to programmatically trigger an event as opposed to using a callback :) – Egress

You are quite right that this should have been a comment rather than an answer. Why? Because, uhm, well, .... it doesn't answer the question that was actually asked. Good call. As to your own question, I'd say this would be a great opportunity for constructors in JavaScript! ;-) But without them, I'd say, send an argument with your function call and let that be used to determine what the function should do. – Rushy

Answer 10

I just used the following (seems to be much simpler):

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

In this case the event is triggered only if value was really changed just as you would trigger it by normal focus locus lost performed by user.

Curiosa

This does not take into account what kind of event it is. Blurring and focusing may trigger the event but it may not as well. This is inviting bugs. – Desmonddesmoulins

This also applies to element.click(). – Hardner

This fixed a weird issue for my Angular/Cordova app, in Android, where the textarea would refuse to clear itself. So thanks. – Lermontov

Answer 11

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");

Athlete

This is deprecated. Only useful for polyfills. developer.mozilla.org/en-US/docs/Web/API/MouseEvent/… – Navel

Answer 12

What's worth noticing, is the fact that we can create, any kind of pre-defined events, and listen to it from anywhere.

We are not limited to classical built-in events.

In this base example, a custom event interfacebuiltsuccessuserdefinedevent is dispatched every 3 seconds, on the self.document

self.document.addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false)

setInterval(() => {  // Test
  self.document.dispatchEvent(new Event('interfacebuiltsuccessuserdefinedevent')) 
}, 3000 ) // Test

Interesting fact: elements can listen for events that haven't been created yet.

Facultative

Answer 13

The most efficient way is to call the very same function that has been registered with addEventListener directly.

You can also trigger a fake event with CustomEvent and co.

Finally some elements such as <input type="file"> support a .click() method.

Atone

Answer 14

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

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

this will imediattely trigger an event 'beforeinstallprompt'

Jeconiah

Answer 15

You could use this function i compiled together.

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);
            }
        }
    }
  }

Trigger an event below:

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

Watch Event:

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

Hope this helps!

Standstill

May I ask what's the purpose of throwing an exception and ignoring it in this case with the condition? – Abdominal

This is because the try block might fail since it's wrapped in an if statement. So to trigger the fallback alternative we throw an exception to reach the custom alternatives we've predefined in the catch block. All these is to ensure that the trigger method works across multiple browsers. – Standstill

Answer 16

You can use below code to fire event using Element method:

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>

Approachable

Answer 17

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 
}

Hydrocortisone

Answer 18

Use jquery event call. Write the below line where you want to trigger onChange of any element.

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

element_id is the ID of the element whose onChange you want to trigger.

Avoid the use of

 element.fireEvent("onchange");

Because it has very less support. Refer this document for its support.

Emrick

Answer 19

What you want is something like this:

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

Using jQuery, it would be something like this:

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

Rubescent

trigger method is not wrong, but it is a jquery method – Panier

1. document.getElementByClassName doesn't exist. 2. document.getElementsByClassName exist but returns a list. 3. this only works for a select few native events. 4. The last example triggers a jQuery event where no underlying native event exists. – Electrodynamic