We've already seen in a previous article how to manage JavaScript events.
jQuery simplifies but most of all uniforms the
JavaScript events engine with 2 simple methods: bind()
for
events subscription and trigger()
to fire them.
Events are not only a prerogative of standard DOM (Document
Object Model) objects, your custom objects can throw events too, event
if they aren't DOM objects.
In general, with jQuery you subscribe to events using the
following form
$(mySelector).bind('click', function(event){...});
or the shorter
$(mySelector).click(function(event){...});
As mentioned above you can also subscribe to custom events, with
$(mySelector).bind('mycustomevent', function(event){...});
which in turn will be launched by the custom object using
$(mySelector).trigger('mycustomevent');
Question: can I pass data to the event handler at the time of binding?
Answer: you can pass any information specifying it in the bind
method and the event handler will retrieve it from the data
property of the event
object.
$(mySelector).bind('mycustomevent', myCustomData, function(event)
{
...
var myData = event.data;
...
});
One more question: can I pass data to the event handler at trigger-time?
Answer: simply define an additional parameter in your event handler.
$(mySelector).bind('mycustomevent', function(event, myParam){...});
...
$(mySelector).trigger('mycustomevent', 'this is the trigger-time parameter');