Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Bring your website contents to first postion. Get it automatically with Infrared CMS!

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

jQuery: how to throw and handle custom events

Published on 11/22/2012
Categories: Web Design
jQuery: how to throw and handle custom events

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.

// Use myCustomData to hold bind-time data
$(mySelector).bind('mycustomevent', myCustomData, function(event)
{
    ...

    // event.data contains myCustomData
    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.

// Use myParam to hold trigger-time data
$(mySelector).bind('mycustomevent', function(event, myParam){...});
...
$(mySelector).trigger('mycustomevent', 'this is the trigger-time parameter');

You are the reader number 10,938.

Comments

Previous article

Previous article

An App to see Amsterdam through Anne Frank's eyes

Next article

3 methods to detect mobile devices in ASP.NET

Next article

Scroll to top