Does anybody know of a method to trigger an event in Prototype, as you can with jQuery's trigger function?
I have bound an event listener using the observe method, but I would also like to be able to fire the event programatically.
-
Take a look on my answer. There is a support in prototype...Mohit Jain– Mohit Jain2010-09-14 11:43:36 +00:00Commented Sep 14, 2010 at 11:43
Add a comment
|
4 Answers
event.simulate.js fits your needs.
I've used this several times and it works like a charm. It allows you to manually trigger native events, such as click or hover like so:
$('foo').simulate('click');
The great thing about this is that all attached event handlers will still be executed, just as if you would have clicked the element yourself.
For custom events you can use the standard prototype method Event.fire().
6 Comments
CalebHC
Freakin' brilliant! That helped me out a lot. Thanks :)
Jesper Rønn-Jensen
Very nice interface. However, I'd like that
.simulate method to go into Prototype.js natively :)
Marcy Sutton
This no worky for those of us with plugin licensing issues -- I ended up calling the functions on native elements since Prototype sucks so hard.
Jānis Gruzis
This supports only HTML and Mouse events. You cant for example trigger onchange event since its Form event. But if you merge Gregs script for those cases then its pretty nice tool.
Paul Lynch
@JānisGruzis HTMLEvents includes 'change'. See w3.org/TR/DOM-Level-2-Events/events.html
|
I don't think there is one built in to Prototype, but you can use this (not tested but should at least get you in the right direction):
Element.prototype.triggerEvent = function(eventName)
{
if (document.createEvent)
{
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
return this.dispatchEvent(evt);
}
if (this.fireEvent)
return this.fireEvent('on' + eventName);
}
$('foo').triggerEvent('mouseover');
3 Comments
avlnx
Greg's answer works for me, but it should be
$('foo').triggerEvent('mouseover'); instead of $('foo').fireEvent('mouseover'); ps. sorry im new here and dont know how to quote or comment on an answer that already exists... thx
Roman Snitko
did you mean $('foo').triggerEvent('mouseover') ?
quickshiftin
The Prototype way; very nice!
I found this post helpful... http://jehiah.cz/archive/firing-javascript-events-properly
It covers a way to fire events in both Firefox and IE.
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);
}
}
Comments
The answers here are true for "Normal" events, that is events which are defined by the User Agent, but for custom events you should use prototype's "fire" method. e.g.
$('something').observe('my:custom', function() { alert('Custom'); });
.
.
$('something').fire('my:custom'); // This will cause the alert to display
