Using jQuery's Proxy() Method In Event Binding And Unbinding

Yesterday, I explored the use of jQuery's native event management in the creation of object-oriented publication and subscription (pub/sub) functionality. In order to do this, I had to make use of jQuery's new proxy() method that allows function callbacks to be executed in the context of an object instance rather than a DOM node (which is typically what happens). At its core, the proxy() method is basically an easy way to use Javascript's apply()-based context-binding. However, using proxy() instead of apply() allows jQuery to manage the relationship between functions which, ultimately, makes our programming lives much easier.

You'd have to look in the source code of the jQuery library to know this, but what makes proxy() so awesome is the fact that jQuery pulls the unique ID of the core method through to all of its proxies:

As you can see here, jQuery keeps an internal counter to represent a "guid" (Globally Unique ID). When a function goes through the proxy() method, jQuery generates a new guid value and then applies that guid to both the core function as well as the resultant proxy function. It does this so that you can use the original function reference to unbind an event handler callback that has been proxied - jQuery uses the guid to test for function equivalence during the unbind process.

To see this in action, I've created a small jQuery demo in which a function is bound to an event using the proxy method; then, later on, the same event handler is unbound using the original function reference.

As you can see here, our original function reference, "handler," is being proxied twice before it actually gets passed into jQuery's bind() method. Then, when we go to unbind the event, we are using the original handler reference. When we run the above code, we get the following console output:

Hello, Joanna
Done

As you can see here, the second trigger() invocation did not result in any console output because there were no longer any event handlers bound to the given event type; passing the original handler reference to the unbind() method was successful.

There are two critical points to take away from this code: first, jQuery's proxy() method is the most awesome way to bind context-sensitive event handlers because we can always unbind the event handlers using the original function references. Second, once a function is proxied, attempting to proxy it again is useless. If you look at the code, you'll notice that the handler is first proxied to "joanna" and then, subsequently, to "sarah." Yet, when we trigger() the event, it is "Joanna" that we see in the console. Technically, the "sarah" proxy worked; however, the context-binding is encapsulated within the resultant proxy function. As such, the most-inner proxy will always execute in the context of the object to which it was originally bound.

When I first learned about jQuery's proxy() method, I thought it was a little silly; after all, Javascript already has call() and apply() methods for changing execution context. But, once you realize that jQuery's proxy() method allows you to easily bind() and unbind() event handlers regardless of context, it becomes obvious just how powerful this method is.

NOTE: The proxy() method can also take the following signature: jQuery.proxy( object, methodName ). This is functionally equivalent to jQuery.proxy( object[ methodName ], object ). While I use the latter in my demo, I would definitely use the former, more succinct proxy() signature in a true object-oriented setting.

You Might Also Be Interested In: