JavaScript events bubble, block event bubbling and event delegation, and event delegation is an app for event bubbling.

First of all, figure out what is the event in JS, and how the event model is designed in JS. What is event bubbling?

What is "event bubbling"? Suppose there is a glass of water, and the water is divided into layers of different colors in some magical way. At this point, a bubble emerges from the bottom, and the bubbles rise to the top of the layer. And you can see and capture this bubble no matter which layer of water you are observing. OK, change "water" to "DOM" and Change "bubble" to "event". This is "event bubbling."

What is an event delegate? Event delegation: Address: Http://davidwalsh.name/event-delegate

One of the hot methodologies in the JavaScript world is event delegation, and for good reason.  Event delegation allows avoid adding event listeners to specific nodes;  Instead, the event listener is added to one parent.  That event listener analyzes bubbled events to find a match on the child elements.  The base concept is fairly simple but many people don ' t understand just how event delegation works. Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.

Here is an explanation I found in csdn, well written. Original address: http://blog.csdn.net/iefreer/article/details/8573940

1. What is the event?

An event is an interactive action that occurs when a user operates a webpage, such as Click/move, which can be a document load, window scrolling, and resizing, in addition to user-triggered actions.

2. What is the event model?

The event model refers to how the browser handles events that occur. Different browsers deal with the same mechanism, or even the opposite.

In general, a single event occurs for an interface element, and the object that handles the event is the interface element.

But a typical problem is if the interface element has a parent-child element, and the parent-child element also defines the same event,

At this time how to deal with the incident , the incident between the parent-child element is how to pass , who will first receive this event, and who first deal with it?

As an example:

-----------------------------------| Element1                        | |   -------------------------     ||   | Element2               |     | |   -------------------------     ||                                 | -----------------------------------

Element2 is a child element of element1, both of which define the onclick event.

This is the problem that the event model (event sequence) will address .

two types of models

Back in the era of Netscape and Microsoft, the two companies chose a different path:

Netscape chooses the event capture (capturing) model, which Netscape thinks Element1 first gets to the event;

Microsoft has opted for a message mechanism similar to its desktop system, thinking that Element2 has a higher priority, event bubbling (bubbling),

The two models are diametrically opposed, IE only supports event bubbling. Mozilla, Opera 7 and other two kinds are supported. Older versions of opera and ICAB are not supported in two types.

You may now experience what is the best and worst of times for the Internet at first.

Event Capture

               | |--------------- | |-----------------| Element1    |   | | | -----------    | |-----------     ||   | Element2  \/          |   | | -------------------------     ||        Event Capturing          |-----------------------------------

Looking at the direction of the arrow above, theelement1 event handler is first triggered and then passed down to Element2

Event Bubbling

                 / --------------| |-----------------| Element1   |   | | | ----------- | |-----------     ||   | Element2 | | | |     |   -------------------------     ||        Event Bubbling           |-----------------------------------

in contrast to event capture, the Element2 event handler is first triggered .

Model

The system has handled this difference very sensibly, and has taken a neutral approach between the two, which specifies that any event will first be captured until the target element is encountered and then returned upward.

                 | |  / -----------------| |--| |-----------------| element1 | | | | |                |   ---------------| |--| |-----------     ||   | Element2    \/| | | |     |   --------------------------------     ||        Event Model                 |------------------------------------------

The web Developer can addEventListener() choose at which stage to register the event handler (capture phase or bubbling phase) by means of a method, which is described in detail in advanced models, with the last argument being true, Indicates that the event is processed during the capture phase, and False indicates that the event is processed during the bubbling phase.

Like what:

Element1.addeventlistener (' click ', Dosomething2,true) element2.addeventlistener (' click ', Dosomething,false)

The event is first captured by Element1, then executed doSomething2, then the event is passed to Element2,dosomething, and then the event bubbles back to check if there is a parent element (ELEMENT1) that defines the event handler for the bubbling phase, where there is no , so the event terminates.

Compatible with traditional models

In browsers that support the DOM, traditional event registrations are considered to be registered in the bubbling phase.

Element1.onclick = doSomething2;
——————————————————————————————————————————————————————————————————————————————————————————————————————————————— —————————————————
Example: Original address: http://www.pureweber.com/article/event-delegation/

Example Note: The JS function of the note is to show (event bubbling and Event capture): Click on the smallest one, all the outside will be colored. You will find that by clicking on the inner square, all the squares in the outer layer will be colored. Because they also capture the Click event. Not annotated: Modify the program above and use event delegates to handle click events.  When capturing a click event at the topmost level, see which layer the event originated from and then paint only that layer. Click each layer again to see the actual effect. Only the square of the current click is discolored, and nothing else is responding. Are "delegated" to the topmost div. Of course, if you have such nested page elements , so  that the event delegate is delegated to the topmost level , you need to note: if one of the elements, you   Do not want its events to bubble , then you can use some way to prevent the bubbling of events . In the jquery framework, you can use the Stoppropagation () method to implement without worrying about browser compatibility. 
Purpose of Event delegation: Event delegation is an application of event bubbling, which can reduce the number of binding elements, and it is not necessary to worry that the child nodes may need to be re-bound after being replaced. Because the capture of the event and subsequent execution of the code has been fully delegated to its parent node. If a page contains a large number of elements that require binding events, doing so reduces the number of event bindings and offloads the browser, which will undoubtedly improve page performance.
 JavaScript event bubbling, blocking event bubbling, and event delegation are an application of event bubbling.