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;

Comments

Anonymous

<p>Thanks a lot !!! This script works fine !!!<br><br>I'm was with a problem in JSF commandLink inside a column.<br><br>I resolved my problem putting a commandLink out of dataTable and call this function to submit de page.</p>

Anonymous

Anonymous

Thanks a lot !!! This script works fine !!!<br><br>I&#39;m was with a problem in JSF commandLink inside a column.<br><br>I resolved my problem putting a commandLink out of dataTable and call this function to submit de page.

Anonymous

Siderite

<p>My first observation is that you used document.dispatchEvent and document.fireEvent instead of target.<br><br>Maybe document doesn't support fireEvent, as the events are usually on window or on document.body.</p>

Siderite

Siderite

My first observation is that you used document.dispatchEvent and document.fireEvent instead of target.<br><br>Maybe document doesn&#39;t support fireEvent, as the events are usually on window or on document.body.

Siderite

kai

<p>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.<br><br>function fireClickEvent(el) {<br> var target = document.getElementById(el);<br> if(target)<br> {<br> if(document.dispatchEvent) { // W3C<br> var oEvent = document.createEvent( "MouseEvents" );<br> oEvent.initMouseEvent("click", true, true,window, 1, 1, 1, 1, 1, false, false, false, false, 0, target);<br> target.dispatchEvent( oEvent );<br> }<br> else if(document.fireEvent) { // IE<br> target.fireEvent("onclick");<br> }<br> }<br>}</p>

kai

kai

Thanks for your article. I can&#39;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.<br><br>function fireClickEvent(el) {<br> var target = document.getElementById(el);<br> if(target)<br> {<br> if(document.dispatchEvent) { // W3C<br> var oEvent = document.createEvent( &quot;MouseEvents&quot; );<br> oEvent.initMouseEvent(&quot;click&quot;, true, true,window, 1, 1, 1, 1, 1, false, false, false, false, 0, target);<br> target.dispatchEvent( oEvent );<br> }<br> else if(document.fireEvent) { // IE<br> target.fireEvent(&quot;onclick&quot;);<br> }<br> }<br>}

kai

Joshua Bloom

<p>Thanks, that was helpful while trying to understand IE's event handling.</p>

Joshua Bloom

Joshua Bloom

Thanks, that was helpful while trying to understand IE&#39;s event handling.

Joshua Bloom

Post a comment