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?

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

Solution 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.

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

Solution 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.

Solution 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>

View more solutions

Comments

[Rohan Desai]

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

[NeDark]

What does the variable eventName contain here?

[ThemeZ]

@Alsciende how can I attach my event handler to this custom event?

[alagar]

dataavailable should be in the eventName variable I believe.

[Charles]

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

[B T]

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.

[Blake]

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

[Dorian]

This example doesn't even works, see my answer: stackoverflow.com/a/20548330/407213

[nicholaswmin]

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

[Kiril]

This answer is more actual now. One thing to add: if there should be a know-typed event (like TransitionEvent, ClipboardEvent, etc) the appropriate constructor could be called.

[harry]

The correct syntax is $('#yourElement').trigger('customEventName', [ arg0, arg1, ..., argN ]); You have forgotten the [] at the second parameter

[georgelviv]

fireEvent on IE what verison of IE it supports?

[Brendan]

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!

[Kamuran Sönecek]

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

[Mardok]

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.

[Andreas Haufler]

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

[Glenn Jorde]

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.

[Ciro Santilli OurBigBook.com]

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

[Dorian]

@AngelPolitis: Because it was written after the previous one was already accepted and the person who wrote the question (@KoolKabin) probably didn't re-read the answers

[ling]

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

[hipkiss]

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

[AxeEffect]

This also applies to element.click().

[SidOfc]

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

[SidOfc]

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 :)

[DarkNeuron]

And because it was asked in 2010

[DarkNeuron]

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

[Andrew]

or: $(selector).change();

[KWallace]

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.

[Yarin]

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

[user2912903]

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

[Fabian von Ellerts]

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

[daka]

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

[vir us]

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

[jak.b]

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