Using Objects’ Methods as Event Listeners - J Query

Problem
You have objects with methods and attributes, and you want to pass those methods (functions) as event handlers. The problem is that once you do this, the method will “lose the reference” to the object, and you have no way of referencing the object within the event handlers.

Solution

This used to be quite complicated to achieve. It required you to generate closures that would encapsulate the object and then pass them to bind().
Since jQuery 1.3.3, a new parameter has been added to bind(). It allows you to specify an object as the scope or this of the event handler without using function closures.
This makes the required code both shorter and faster. You can now pass the object’s method as the function and the object itself as the scope.

Discussion

Where did the node go?

You will surely wonder this sooner or later. I said before that when you pass a scope object to bind(), the this of the event handler will be overridden. This means we can’t retrieve the node as we always do...but the node is not lost.
When you pass a scope object to the bind() method, events will be delivered with the this of the event handler set to the scope object. You can still determine the element being delivered to the event by using the event.currentTarget property, which contains a reference to the DOM element.
It’s usually not needed because using the this is shorter, but in situations like this, it’s the only way around.

The example

I’ll create a small example that should illustrate how to use the scope parameter and also show you a situation where it is useful.
For the example, we’ll need two objects. Each will have a method that we want to bind as an event handler.
These are the objects:

Let’s suppose we have some sort of form and it has two checkboxes (#c1 and #c2). Each will manipulate the married state of one of our previous objects.

Thanks to the scope attribute, we don’t need to create new functions for each binding; we can use the objects’ methods instead.
The methods don’t even need to be attached to the objects in the first place. You could do something like this:

As you can see, you’re not really forced to put those functions into the objects’ prototype, and it could actually make more sense to keep them separated. Why should a method belonging to Person know about checkboxes and the node? It’s probably nicer
to keep all the specific DOM manipulation apart from the data.
In some cases, the object’s method won’t need to know about the node or the event object at all. When this happens, we can bind a method directly, and we won’t be mixing DOM and data at all.
If we had to have make two buttons (#b1 and #b2) to display the name of one person when clicked, then it’d be as simple as this:

It’s worth mentioning that both methods are actually the same:

The function is created only once and saved into Person.prototype.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics