JS event capture, event bubbling, event delegation, and DOM event flow

One:DOM event Flow :

The event flow is the order in which events are received from the page, and the DOM2 level event specifies that the event flow consists of three stages:

① Event Capture phase: An event flow model that is intended to capture an event before it reaches its target in the event capture phase: Document→html→body→div

② in Target Phase 2: Actual target-to-event

③ Event Bubbling phase: The event is received by the most specific element and then propagated up to the less specific node. Event Flow model: Div→body→html→document

Two: Event delegation

The event delegate, as its name implies, delegates the event to another element. is to use the DOM's event bubbling principle to bind events to the parent node of the target element.

If you want to bind an event to a large number of element nodes, you can perfectly resolve the event delegate, bind the event directly on the parent node of the element, and only bind once to trigger the event on all child nodes.

Three: Common event bindings:

(1) Bind ()

disadvantage: can only be called when it is already existing element binding events, can not be added to the future of new elements binding events, such as the content of a lot of content when the page needs to click "Next Page" when it will be loaded, then the newly loaded element bind does not give them bind event.

Bind () is not available:

① binds the same event to many elements in the DOM;

② an element binding event that does not yet exist in the DOM;

Workaround: Use the Live () method

(2) Live ()

Method binds the Click event to the $ (document) object, and only needs to bind to $ (document) once (not 50 times, not 5,000 times), and then be able to handle the events of subsequent dynamically loaded nodes. When any event is received, the $ (document) object checks the event type and the event target, and if it is the click event and the event target is TD, then the handler entrusted to it is executed.

Disadvantages:

The ①$ () function finds all the target elements in the current page and creates a jquery object, but does not use the collection when confirming the event target, but rather uses the selector expression to compare with event.target or its ancestor elements, resulting in an unnecessary overhead for generating this jquery object;

② the event is bound to the $ (document) element by default, and if the DOM nesting structure is deep, event bubbling through a large number of ancestor elements can cause performance loss;

③ can only be placed behind directly selected elements and cannot be used after the Concatenating DOM traversal method, which is $ ("#info_table TD"). Live ... Yes, but $ ("#info_table"). Find ("TD"). Live ... No

④ collects the target element and creates a jquery object, but the actual action is a $ (document) object, which is confusing.

Workaround:

① to avoid the performance penalty caused by event bubbling, jquery supports the use of a context parameter when using the. Live () method, starting with 1.4.

$("TD",$("#info_table" ) [    0    ]).     live     (    "click"    ,     function     ()    {/* show more information */        

In this way, the "trustee" is changed from the default $ (document) to $ ("#info_table") [0], saving the bubbling journey. However, the context parameter used in conjunction with. Live () must be a separate DOM element, so the context object is specified here using $ ("#info_table") [0], even if a DOM element is obtained using the array's index operator.

② using closures:

To avoid generating unnecessary jquery objects, you can use a hack called "Early Delegates", which is called outside the $ (document). Ready () method. Live ():

(function($){ $("#info_table td").live("click",function(){/*显示更多信息*/});})(jQuery);

Here, (function ($) {...}) (JQuery) is an "immediate anonymous function"that forms a closure that prevents naming conflicts. Inside the anonymous function, the $ parameter references the jquery object. This anonymous function will not wait until the DOM is ready to execute . ( Note that when you use this hack, the script must be linked and/or executed in the head element of the page.) This timing is chosen because the document element is available, and the entire DOM is far from being generated; If you put the script in front of the end body tag, it makes no sense, because the DOM is fully available at that time. )

③ using the delegate () method

(3) delegate ():

Delegate () binds the target element selector ("TD"), the event ("click") and the handler to the "dragged-side" $ ("#info_table") directly, without additional collection elements, shortened event propagation paths, and explicit semantics;

Delegate () supports calling after the DOM traversal method of concatenating, which is support for $ ("table"). Find ("#info"). Delegate ..., support for precise control;

About the evolutionary process of binding statements:

Bind () Phase:

$("info_table td").bind("click", function()；

Live () Stage:

①:$("#info_table td").live("click",function()



②: $ "TD" ,$ ( "#info_table" Span class= "pun") [0]). ( "click" ,function () /span>

delegate()阶段

$("#info_table").delegate("td","click",function)

JS event capture, event bubbling, event delegation, and DOM event flow