Friday, September 15, 2006

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
} 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)
} else
if (box.fireEvent) {
} else
} else box.checked=!box.checked;


Joshua Bloom said...

Thanks, that was helpful while trying to understand IE's event handling.

kai said...

Thanks for your article. I can't figure out why this function below is still not firing for me in IE. I call fireClickEvent at window.onload and this works fine in FF but not in IE. Am I missing something? Thanks for your help.

function fireClickEvent(el) {
var target = document.getElementById(el);
if(document.dispatchEvent) { // W3C
var oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent("click", true, true,window, 1, 1, 1, 1, 1, false, false, false, false, 0, target);
target.dispatchEvent( oEvent );
else if(document.fireEvent) { // IE

Siderite said...

My first observation is that you used document.dispatchEvent and document.fireEvent instead of target.

Maybe document doesn't support fireEvent, as the events are usually on window or on document.body.

Anonymous said...

Thanks a lot !!! This script works fine !!!

I'm was with a problem in JSF commandLink inside a column.

I resolved my problem putting a commandLink out of dataTable and call this function to submit de page.