Firing Javascript Events (like onchange)
I thought I would throw this post out there because it's an easy thing to miss as a beginner (and yes it's almost as easy to forget once you are more advanced and grasp it).
The problem is that if you have a handle to an object you would normally expect to run an event this way: (I will use the onchange event as an example)
<input type="text" onchange="alert('i was clicked')" id="test">
<script>
document.getElementById("test").onchange()
</script>
Which worked fine didn't it? But there are other ways functions can get attached. Often times you set functions programatically.
<input type="text" id="test">
<script>
obj = document.getElementById("test");
obj.onchange = function(){alert('hi');};
obj.onchange();
</script>
That method of course only lets you set one function as the event handler, as setting another will just overwrite it. This is why libraries like prototype have really useful shorthand notation (Event.observe) for using the proper method of binding events addEventListener and addEvent.
<input type="text" id="test">
<script>
obj = document.getElementById("test");
Event.observe(obj,'change',function(){alert('hi');});
obj.onchange();
</script>
Whoa the call to onchange doesn't work anymore! If you were to change values in the field through the browser it will still get called just fine. Why?
The problem is that the onchange event is not getting called properly. You can't call events just like you would normal functions, because there may be more than one function listening for an event, and they can get set in several different ways (like I showed above).
Unfortunately, the 'right way' to fire an event is not so easy because you have to do it differently in Internet Explorer (using document.createEventObject) and Firefox (using document.createEvent("HTMLEvents"))
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
Now we can finally use this new method to run our event.
<input type="text" id="test">
<script>
obj = document.getElementById("test");
Event.observe(obj,'change',function(){alert('hi');});
fireEvent(obj,'change');
</script>
My fireEvent function is not perfect, I am just using it to point out the problem and how to work around it. prototype.js version 1.6 incorporates a more complete solution for this called Update: as Jason points out, the Event.fire method in prototype 1.6 doesn't implement firing events like onchange. I should know to test things first before writing about them.
Event.fire (at least I hope it's more complete).
Hopefully, that helps explain why sometimes you can't fire an event using the shorthand notation obj.onchange().
All the examples on this page can be tested on the example page
2 years, 6 months ago
This is a good article on firing events, however the prototype Event.fire only works (in 1.6) for custom name-spaced events, not native events. They have not implemented firing native events because of the browser inconsistencies.
Here’s a thread where sam explains it
http://groups.google.com/group/prototype-core/browse_thread/thread/9fec287978138250
2 years, 6 months ago
hmmm interesting, I guess i didn’t look closely enough at the prototype 1.6 implementation. I only noticed it as an afterthought when writing when since i only knew no such thing existed in 1.5
I also must not have tried enough different browsers because my function seemed to work fine for me, unlike what Sam describes. (or my definition of “All Browsers” is different)
2 years, 3 months ago
[...] For a nice guide of firing events (cross-browser wise), you can checkout firing javascript events properly, where there are some nice examples to think of. Just to give a short receipt from Jehiah’s post: [...]
1 year, 11 months ago
Thanks for the very useful information in this article. I want to convert a lot of code that’s like your example 1 to use prototype and be like example 4. However, I found that example 4 does not work for me in IE6 and IE7. IE reports “Error: Invalid argument” at line 91. The solution I found is to change the name of your function from fireEvent to something else, like MyFireEvent or FireEvent.
1 year, 9 months ago
I assume that you release that code into the public domain so that we can all use it? :-)
-Max
1 year, 8 months ago
[...] Firing Javascript events properly [...]
1 year, 6 months ago
thank you very much for your code
1 year, 5 months ago
Nice handy little function.
I would suggest that whenever you feature test you test for the standards feature first, that way if IE ever goes standards compliant OR someone is using compatibility code the standard way of doing things will get invoked instead of the nasty nasty nasty IE way of doing it.
Eg.
function fireEvent(element,event){
if(document.createEvent){
// dispatch for firefox + others
var evt = document.createEvent(“HTMLEvents”);
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
else{
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent(‘on’+event,evt)
}
}
1 year, 5 months ago
[...] AW: onchange event Hi, Firing Javascript Events (like onchange) habe ich zwar selbst noch nicht ausprobiert, sollte aber gehen. LG __________________ Da es nötig zu werden scheint: Ich leiste hier keinen Support über PN. Stellt Rückfragen zu Euren Problemen bitte in Eurem Thread, dann können alle helfen. [...]
11 months, 2 weeks ago
Thank you very much for your code. It really helped
10 months, 4 weeks ago
Just another recommendation: jquery has ‘trigger’ which fires events (both native and custom namespace).