Custom Events in jQuery - A Powerful Technique

This post demonstrates how to create and utilize custom events in jQuery to achieve dynamic behavior and simulate the observer pattern. We’ll leverage jQuery’s capabilities to manage event handlers on the fly, even as the DOM is modified.

Live Event Handling

Our example uses jQuery’s live() method (note: live() is deprecated in newer jQuery versions; on() should be used instead for modern compatibility. This example is preserved for illustrative purposes of the original article) to manage event handlers dynamically. This means we can proactively establish event handlers for elements that don’t yet exist in the DOM. The syntax is similar to bind() or click().

Triggering Events

We’ll use the trigger() method to invoke (trigger) event handlers programmatically. trigger() simulates the event, populating a jQuery event object. Note that properties reflecting event-specific values (like mouse coordinates) will not have values in this simulated context.

Example

Let’s examine the jQuery and HTML code.

jQuery Code

$(function () {
  // Wait until DOM is fully loaded
  $("#addBox").click(function () {
    $("td.box:first-child").clone().appendTo("tr.boxLine");
  });

  $("#paintBlue").click(function () {
    $("td.box").trigger("paintThem");
  });

  $("td.box").live("paintThem", function () {
    //Note: live() is deprecated. Use on() for modern jQuery
    $(this).css("background", "blue");
  });
});

1. A click handler adds a new box-like element to the DOM by cloning an existing table data element.
2. Another click handler triggers a custom event named “paintThem” on all elements with the class box.
3. The live() method (or on() in modern jQuery) establishes the handler for the custom “paintThem” event. This ensures that any elements with the class box, even those added dynamically, will respond to the event.

HTML Code

<table>
  <tr class="boxLine">
    <td class="box" style="width:35px; height: 35px; background:red;"></td>
  </tr>
</table>
<div class="operations">
  <button id="addBox">Add box</button>
  <button id="paintBlue">Paint Boxes</button>
</div>

This simple HTML creates a table with a red box and two buttons: one to add more boxes and another to trigger the custom event to change their color.

Custom Events and the Observer Pattern

Custom events provide a powerful mechanism for loosely coupling elements and their behaviors. They offer a simplified version of the observer (or publish/subscribe) pattern, enabling cleaner and more maintainable code. By triggering the event, any registered handlers automatically execute without the need for explicit calls, promoting loose coupling and easier management of dynamic behaviors. This makes the code more robust and easier to maintain, especially when dealing with asynchronous updates (like AJAX calls).

(Images from the original post were omitted as they were not directly reproducible in this markdown format.)