jQuery Event Handler Methods

Beginner

⏱️ 6 min read

📚 Updated: Jul 2026

🚀 Hub page

Binding & delegation

Overview

What This Hub Covers

jQuery event handler methods connect user actions to your JavaScript. This hub explains direct vs delegated binding, maps legacy APIs to modern .on(), and links to in-depth tutorials — starting with the deprecated but widely encountered .delegate() method.

Direct

Bind on element itself

Delegate

Filter descendants

.on() / .off()

Modern API (1.7+)

Legacy

.delegate(), .bind()

Migrate

Swap arg order

Dynamic DOM

AJAX & .append()

Fundamentals

Introduction

When a user clicks, types, or submits a form, the browser fires an event. jQuery lets you register handlers — functions that run in response. You can attach handlers directly to elements already in the DOM, or use event delegation to listen on a stable parent and react when specific children trigger events.

Since jQuery 1.7, .on() and .off() are the single recommended API. Older methods like .bind(), .delegate(), and .live() still appear in legacy themes and plugins. Understanding them makes maintenance and migration much easier.

Concept

Direct Binding vs Event Delegation

Direct: $("#btn").on("click", fn)
→ Handler runs when #btn is clicked.

Delegated: $("#list").on("click", "li", fn)
→ Handler runs when any li inside #list is clicked — including future items.

The legacy .delegate() method uses the same delegation model with a different parameter order: $(root).delegate("li", "click", fn). See the full tutorial for syntax, examples, and migration steps.

Index

Event Handler Method Index

Method	Description
jQuery.proxy() deprecated 3.3	Lock `this` context for event handlers and callbacks — full tutorial with 5 try-it labs. Use `Function.prototype.bind()` in new code.
.delegate() deprecated 3.0	Attach delegated handlers on a root element — selector first, then event type. Full tutorial with 5 try-it labs.
.undelegate() deprecated 3.0	Remove delegated handlers from a root element — pair with `.delegate()`; migrate to `.off()`. Full tutorial with 5 try-it labs.
.live() removed 1.9	Attach document-level delegated handlers for current and future elements — full tutorial with 5 try-it labs. Pair with `.die()`.
.die() removed 1.9	Remove handlers attached with `.live()` — the unbinding counterpart to document-level delegation. Full tutorial with 5 try-it labs.
.on() recommended	Attach direct and delegated event handlers — eventData, namespaces, custom events, and multi-event object maps. Full tutorial with 5 try-it labs.
.one() recommended	Attach handlers that run at most once per element per event type — auto-unbind after first invocation. Full tutorial with 5 try-it labs.
.trigger() recommended	Programmatically fire events and pass extra parameters to handlers — custom events, `jQuery.Event` objects, and chaining. Full tutorial with 5 try-it labs.
.triggerHandler() recommended	Execute jQuery handlers without bubbling or native side effects — capture return values, first-element-only firing. Full tutorial with 5 try-it labs.
.off() recommended	Remove handlers attached with `.on()` — namespaces, delegated `**` selector, and handler references. Full tutorial with 5 try-it labs.
.unbind() deprecated 3.0	Legacy direct unbind for `.bind()` handlers — migrate to `.off()`. Full tutorial with 5 try-it labs.
unload event recommended	Bind page-exit handlers with `.on("unload")` on window — trigger with `.trigger("unload")`. Full tutorial with 5 try-it labs.
.unload() removed 3.0	Legacy shorthand for the unload event — removed in jQuery 3.0; migrate to `.on("unload")`. Full tutorial with 5 try-it labs.
Click event recommended	Deep dive into `.on("click")`, `.trigger("click")`, and event delegation with dynamic lists.
event.delegateTarget	Property on the event object — the element where delegation was attached.
Event object hub	event.target, preventDefault(), stopPropagation(), and more.
Mouse events hub	click, dblclick, mouseenter, hover, and related tutorials.

Migration

🔄 Legacy → Modern Cheat Sheet

jQuery

// .delegate()  →  .on()
$( "#list" ).delegate( "li", "click", fn );
$( "#list" ).on( "click", "li", fn );

// .undelegate()  →  .off()
$( "#list" ).undelegate( "li", "click" );
$( "#list" ).off( "click", "li" );

// .live() / .die()  →  .on() / .off()
$( "p" ).live( "click", fn );
$( "p" ).die( "click", fn );
$( document ).on( "click", "p", fn );
$( document ).off( "click", "p", fn );

// .bind()  →  .on()  (same argument order)
$( "#btn" ).bind( "click", fn );
$( "#btn" ).on( "click", fn );

// jQuery.proxy()  →  Function.prototype.bind()
var bound = jQuery.proxy( obj.handle, obj );
var bound = obj.handle.bind( obj );

// .unload()  →  .on("unload")  (removed in jQuery 3.0)
$( window ).unload( fn );
$( window ).on( "unload", fn );
$( window ).unload();
$( window ).trigger( "unload" );

❓ Frequently Asked Questions

What are jQuery event handler methods?

They attach and remove functions that run when DOM events fire — click, keydown, submit, and custom events. Direct binding targets elements in the current jQuery collection. Delegated binding listens on a parent and filters by a descendant selector.

Which method should I use for new jQuery code?

Use .on() to bind and .off() to unbind. They replaced .bind(), .unbind(), .delegate(), .undelegate(), and .live(). One API covers direct handlers, delegated handlers, eventData, and namespaced events.

What is the difference between direct and delegated binding?

Direct: $('#btn').on('click', fn) runs when #btn itself is clicked. Delegated: $('#list').on('click', 'li', fn) runs when a click originates from an li inside #list — including items added later.

Is .delegate() still valid?

.delegate() works in jQuery 3.x but is deprecated since 3.0. Replace it with .on() by swapping parameter order: .delegate('td', 'click', fn) becomes .on('click', 'td', fn).

How do I remove delegated handlers?

Use .off(eventType, selector) — for example $('#list').off('click', 'li'). The legacy equivalent is .undelegate('li', 'click').

Where should I start on this page?

Read the binding vs delegation overview, browse the method index, then open the .delegate() tutorial for full syntax, five try-it labs, migration steps, and event-specific FAQs.