jQuery Custom Event - A kind of Hook like WordPress

The most important feature that makes WordPress powerful and easy to customize is hook system. Developers can create as many hooks as he want, at various places that let users run extra code without modifying the original one. In Javascript (I mean pure Javascript), there's nothing like that, but in jQuery there is. It has a different name - custom event. In this post, I'm gonna to show you how to implement custom event in jQuery to make it runs similarly like hook in WordPress.

The fundamental of jQuery custom event is function trigger:

Execute all handlers and behaviors attached to the matched elements for the given event type.

It acts similarly like do_action in WordPress!

The main keywords here are: handler and event, which in WordPress mean callback function and action name. The cool thing is event can be not only default Javascript event (click, focus, hover, etc.) but can be anything!

1. Add custom event in jQuery

So, to add a custom event in jQuery, simply do this:

$( '#element' ).trigger( 'custom_event_name' );

Similar thing in WordPress:

do_action( 'custom_hook' );

You can add this line anywhere in your code, where you want the custom event fired. Users need to "hook" into this event to run their custom code (step 2).

2. Add callback to custom event

There're various functions in jQuery that helps us add callback (handler) to a custom event: bind, delegate, on (since jQuery 1.7). And because bind and delegate call on in its core, we're going to use on here.

To add a handler to a custom event, we can do like this:

$( document ).on( 'custom_event_name', '#element', function()
{
    // Our custom code
} );

Or if you prefer a function name instead of anonymous callback:

// Define callback function
function my_callback()
{
    // Our custom code
}

// Add event handler
$( document ).on( 'custom_event_name', '#element', my_callback );

This looks exactly like a normal event handler that we often use for common events like click, hover, etc. The difference is only it will be fired when custom event is called (step 1).

In WordPress, the similar thing is:

function my_callback()
{
    // Our custom code
}

add_action( 'custom_hook', 'my_callback' );

Putting everything together, we have a "hook system" in jQuery that works like in WordPress. This is an example I made in Codepen for demonstration (I add 2 callbacks for a custom event):

Although jQuery custom event is cool, but it has 2 limitations compared with hook system in WordPress:

• We can't define priority in jQuery, e.g. we can't make the callback functions run in predefined order (in the example above, the 2nd callback runs at the same time as 1st one)
• WordPress has filters, while jQuery doesn't. We can't modify one value with multiple callback functions

Anyway I believe that with jQuery custom event, we have a very strong tool that can help us do incredible things just like we're doing with WordPress.