Bind Javascript Objects to jQuery events

If you have ever been looking for a way to quickly bind your Javascript objects to jQuery events, then you have come to the right place.

Many jQuery developers already know that the jQuery library provides a method that allows them to capture events on a DOM element using a callback function. For example:


$('#element').bind(function() {
    alert('hello');
})

This is great but what if you want to use an object to capture the event? This is where BindO comes in.

BindO is a jQuery plugin that makes it possible for you to capture jQuery events with an object. I got this idea after taking with Michael on the jQuery mailing list.

Here's an example of how BindO works:


// Form Mailer class
FormMailer = function() {
    // do something here
}
FormMailer.prototype = new Object;
FormMailer.prototype.submit = function(event) {
    alert('About to submit form');
    this.process(); // call the process function
    $(event.target).fadeOut(); // fadeout #element
}
FormMailer.prototype.process = function() {
    // process data here
}

// create a new instance of FormMailer
myform  = new FormMailer();

// now bind the click event to myform.submit
$('#element').bind('click',[myform, 'submit']);

You can also use the jQuery shortcut event names.
For example:
$(…).click([myform, 'submit']);

So now you're probably wondering how do you gain access to the element, right?
Here's an example showing how you can access the element that triggered the event:


MyClass.prototype.hideElement = function(event){
    $(event.target).fadeOut();
}

Please note that the "this" keyword will reference object instance and not the DOM element.

Download BindO
You can download the BindO plugin and example files by clicking here. Note: The example requires the jQuery library.

BindO Quick Reference Guide
$(…).bind('event',[object,'method'])
$(…).bind('event',[object,'method','args'])
$(…).bind('event',data,[object,'method',args])

Object – The object to bind the event to.
Method – The name of the method to be invoked on the object
Args – An extra argument that's added to the event object.

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
Ron
Posts: 7
Comment
Part of jquery
Reply #9 on : Fri January 15, 2010, 10:05:46
Thanks for the great plugin! I think this should become a default jQuery feature. I almost always use javascript objects when programming, and then you just can't live without this.

I'm however wondering if this plugin does have a memory leak. I'm not sure, but I think it does. The method creates a referenced method which is never dereferenced.
xwisdom
Posts: 2
Comment
Re:Return the result from the bound object
Reply #8 on : Tue March 03, 2009, 22:25:00
Hi Morten,

Thanks for the update. I've added your suggestions and have released 1.0.3.

See here:
http://plugins.jquery.com/project/bindo
Morten Fangel
Posts: 7
Comment
Return the result from the bound object
Reply #7 on : Sat February 28, 2009, 05:36:06
Hi,

Instead of having cb[0][cb[1]](event,data); on line 21, you should have

return cb[0][cb[1]](event,data);

Because if you do $('a#some-id').bind([this, 'click']); and this.click() returns false, the link-action is still performed because the false return value is never being returned from bindo..
xwisdom
Posts: 7
Comment
RE: Comment using bindo with jQuery.trigger
Reply #6 on : Fri October 17, 2008, 11:59:02
Hi Jonathan,

Thanks for submitting the patch code. I will try and merge your changes over the weekend and release the updates.
Jonathan Vitela
Posts: 7
Comment
Comment using bindo with jQuery.trigger
Reply #5 on : Thu October 16, 2008, 11:27:40
Hi,

I've downloaded your plugin and it looks great, just a comment:

Somewhere in my code I use a call like this:

$(elem).trigger("customEvent",extraArgs );

in this case the bind to an object doesn't send it the second parameter, i've modified the pluggin at aprox line #18 to correct it:

// ...
if (typeof cb == 'object')
fn = function(event,data) {
event.args = cb[2]; // extra argument
cb[0][cb[1]](event,data);
}
// ...
xwisdom
Posts: 2
Comment
RE: Return value
Reply #4 on : Sun August 31, 2008, 14:08:23
Hi Thomas,

Many thanks for your suggestion.

I've updated the script to now return the jQuery object.
Thomas Carcaud
Posts: 7
Comment
Return value
Reply #3 on : Wed August 27, 2008, 17:49:55
Your bind method should end with 'return this.__bindo(...)', to be able to chain calls like the vanilla bind (eg. .bind('click', [this, 'switchHandler']).appendTo(parent);)
xwisdom
Posts: 7
Comment
Re: Leaks
Reply #2 on : Mon May 12, 2008, 22:00:09
Hi Rob,

Thanks for the feedback. The unbinding process of the code is handled by the jQuery API in the same was normal events are handled. So if you unbind an event that was created with BindO, jQuery will take care of the clean process.

Have a look at the plugin source to see how it handles the event calls
Rob Stanford
Posts: 7
Comment
Leaks?
Reply #1 on : Fri May 09, 2008, 05:29:48
Hi,

Great plugin, have wondered why jQuery couldn't do this natively. I have one concern: does the plugin handle the unbinding of objects to prevent memory leaks?

Thanks,
Rob