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!