Direct vs. Delegated Event Handling in jQuery .on(): When Should I Use Which?

Direct vs. Delegated Event Handling in jQuery .on()

The jQuery .on() method provides two options for event handling: direct and delegated. In the context of delegated handling, the documentation states that the event handler is not called when the event occurs directly on the bound element, but only for descendants that match the selector. However, this raises the question of what exactly is meant by "runs the handler for any elements."

Direct Event Handling

In direct event handling, an event handler is assigned directly to an element using the following syntax:

$("selector").on("event", function() {...});

In this case, the event handler is attached to each element that matches the selector. For instance, the following code assigns a click handler to every element with the class green within the

with the id target:

$("div#target span.green").on("click", function() {
  alert($(this).attr("class") + " is clicked");
});

Delegated Event Handling

In delegated event handling, an event handler is assigned to a parent element using the following syntax:

$("parent").on("event", "child selector", function() {...});

In this case, the event handler is assigned to the parent element, but it only responds to events that occur on descendant elements that match the child selector. This approach is useful for attaching event handlers to dynamic content that is not present when the page initially loads.

Consider the following example:

$("div#target").on("click", "span.green", function() {
  alert($(this).attr("class") + " is clicked");
});

In this example, the click handler is attached to the

with the id target. However, it only responds to clicks that occur on descendant elements that are elements with the class green.

Key Distinction

The key distinction between direct and delegated event handling lies in the relationship between the target element and the element that handles the event. In direct event handling, the target element is also the element that handles the event. In delegated event handling, the target element is the parent of the element that handles the event.

Practical Implications

In general, delegated event handling is preferred when working with dynamic content that can change over time. By attaching event handlers to parent elements, you ensure that events are handled even if new elements are added to the page. Direct event handling is more appropriate for static content that will not change over time.

The above is the detailed content of Direct vs. Delegated Event Handling in jQuery .on(): When Should I Use Which?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1671

14

CakePHP Tutorial

1428

52

Laravel Tutorial

1331

25

PHP Tutorial

1276

29

C# Tutorial

1256

24

Show More