The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →To create a custom jQuery event, attach a handler with .on(), then dispatch the event with .trigger(). You can pass data to the handler at dispatch time, and the event bubbles by default. Use .triggerHandler() instead when you want to run jQuery handlers only on the first matched element, without bubbling or a default action.
Register and trigger a custom event
A custom event is an event name you choose and use consistently when attaching a handler and dispatching it. For example, this event notifies handlers that an item was added to a panel:
const $panel = $("#panel");
$panel.on("item:added", function (event, item) {
console.log("Added:", item);
});
$panel.trigger("item:added", [{ id: 42, name: "Example" }]);The .on() call registers the listener; the .trigger() call dispatches the event on the jQuery collection. The event name is application-defined, so choose a clear name and use the same name at both points. See the jQuery API documentation for .on() and .trigger().
Pass data to the event handler
The handler receives the jQuery event object as its first argument. Any extra parameters supplied to .trigger() come after it. In the example, event is first and item is the second argument.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors#1 Best Overall
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
When you pass an array as the second argument to .trigger(), each array member becomes a separate handler argument. For example, .trigger("item:added", [item, source]) results in a handler signature such as function (event, item, source). jQuery also supports passing a single string or numeric argument without wrapping it in an array, beginning with jQuery 1.6.2.
Dispatch-time data is different from event data passed when attaching a handler. The latter is provided as the second argument to .on(), before the handler runs; extra parameters to .trigger() represent information available when the event is dispatched. The .on() documentation describes event data, and the .trigger() documentation describes extra handler parameters.
Rank #2
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
Understand bubbling and synthetic events
By default, .trigger() invokes matching handlers on all elements in the jQuery collection. Triggered events bubble up the DOM tree, so a handler on an ancestor can observe an event dispatched on a descendant. A handler can stop that propagation when appropriate.
A jQuery-triggered event is synthetic; it is not the same as a browser event caused by a person’s physical interaction. The jQuery API documentation cautions that “Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.” Use it to notify code about an application event, not as a full browser-level user-action simulator.
Choose between .trigger() and .triggerHandler()
Both methods invoke jQuery event handlers, but they differ in scope and behavior:
| Behavior | .trigger() |
.triggerHandler() |
|---|---|---|
| Matched elements | Runs handlers and behaviors on all matched elements. | Runs handlers only on the first matched element. |
| Bubbling | Bubbles up the DOM tree by default. | Does not bubble. |
| Default action | May trigger the event’s default behavior. | Does not cause the default action. |
| Return value | Returns the jQuery collection, allowing chaining. | Returns the last handler’s value. |
Use .triggerHandler() when the intended behavior is confined to jQuery handlers on one element and you need the final handler’s return value. The jQuery API documents the distinctions in its .trigger() and .triggerHandler() references.
Use namespaces for handler management
A namespace can label an event handler so you can selectively remove it later. For example, item:added.widget uses widget as a namespace. Namespaces are management labels, not hierarchical event types; they help identify groups of handlers when using jQuery event methods. See the .on() documentation for namespace syntax and behavior.
Call a function directly when no event is needed
If the goal is simply to run a particular function, call that function directly or have both the event handler and the other code use a shared function. Using .trigger() as an indirect function call adds event-system behavior—such as bubbling and possible default actions—that may not be wanted. The jQuery Learning Center makes this point in Triggering Event Handlers, last updated August 10, 2026.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
