jQuery コード最適化イベント delegation_jquery

(function ($){
$("#info_table td").live("click",function(){/*詳細情報を表示*/});
})(jQuery);

Here, (function($){...})(jQuery) is an "anonymous function that is executed immediately", forming a closure to prevent naming conflicts. Inside the anonymous function, the $parameter refers to the jQuery object. This anonymous function does not wait until the DOM is ready before executing. Note that when using this hack, the script must be linked and/or executed in the head element of the page. The reason for choosing this timing is that the document element is available at this time, and the entire DOM is far from being generated; if the script is placed in front of the closing body tag, it makes no sense, because the DOM is fully available at that time.

In order to avoid performance losses caused by event bubbling, jQuery supports the use of a context parameter when using the .live() method starting from 1.4:

$("td",$(" #info_table")[0]).live("click",function(){/*Show more information*/}); In this way, the "trustee" changes from the default $(document) to $(" #infotable")[0], saving the bubbling trip. However, the context parameter used with .live() must be a separate DOM element, so the context object is specified here using $("#infotable")[0], which is obtained using the array index operator. A DOM element.

.delegate()
As mentioned earlier, in order to break through the limitations of the single .bind() method and implement event delegation, jQuery 1.3 introduced the .live() method. Later, in order to solve the problem of too long "event propagation chain", jQuery 1.4 supported specifying context objects for the .live() method. In order to solve the problem of unnecessary generation of element collections, jQuery 1.4.2 simply introduced a new method.delegate().

Using .delegate(), the previous example can be written like this:

$("#info_table").delegate("td","click",function(){/*Display More information*/});
Using .delegate() has the following advantages (or solves the following problems of the .live() method):

Directly set the target element selector ("td" ), events ("click") and handlers are bound to the "dragee" $("#info_table"), no additional elements are collected, the event propagation path is shortened, and the semantics are clear;
Supports continuous DOM traversal methods Later calls support $("table").find("#info").delegate..., which supports precise control;
It can be seen that the .delegate() method is a relatively perfect solution. But when the DOM structure is simple, .live() can also be used.

Tip: When using event delegation, if other event handlers registered on the target element use .stopPropagation() to prevent event propagation, the event delegation will be invalid.

Conclusion
In the following situations, .live() or .delegate() should be used instead of .bind():

is in DOM Bind the same event to many elements;
binds events to elements that do not yet exist in the DOM;

PS: According to the release notes of jQuery 1.7 Beta 1, in order to solve the inconsistency problem caused by the coexistence of .bind(), .live() and .delegate(), jQuery 1.7 will add a For new event methods: .on() and .off():
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn) );
If selector is specified, it is event delegation; otherwise, it is regular binding. The correspondence between the old and new APIs is as follows:

(Note: This article is compiled based on the relevant chapters of "JQuery Basics Tutorial (3rd Edition)", and also refers to

• The Difference Between jQuery's .bind(), .live(), and .delegate()
• bind() vs live() vs delegate() function
• jQuery API)