Programatically trigger event in Javascript

It's is done in two different ways: the IE way and the DOM way.
IE way) really simple, use element.fireEvent(eventName,[eventObject]), where element is a HTML element and eventName is something like "onclick";
DOM way) really complicated. A short example:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox");
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

As you can see, you need to create the event, then initialize it, then dispatch it.

Things you need to take care with:

• in the DOM model the event name is not prefixed with "on". In the IE way, the event is prefixed with "on". ex: DOM:click IE:onclick.


• in the DOM model the event triggering does everything the event would have done, like setting a value, in IE it does not. ex: triggering onclick in the above example would check or uncheck the box. In IE you need to change the value yourself.

This is code I did to programatically click a checkbox and also trigger the onclick event:

if (box.onclick)        
    {
        if (box.dispatchEvent) {
            var clickevent=document.createEvent("MouseEvents")
            clickevent.initEvent("click", true, true)
            box.dispatchEvent(clickevent)
        } else
        if (box.fireEvent) {
            box.checked=!box.checked;
            box.fireEvent('onclick');
        } else
            box.onclick();
    } else box.checked=!box.checked;