JavaScript event Broker (delegate) principle parsing

What is an event agent? First you need to know what the event is, and figure out the event flow to really understand the event broker principle.

First, what is an event?

The interaction between JavaScript and HTML is implemented through events, which are specific moments of interaction that occur in a document or browser window. such as onload, OnClick, onmouseup, onmousedown ....

Ii. Flow of events

The DOM (Document Object model) structure is a tree structure that, when an HTML element produces an event, propagates the path between the element node and the root node, and the node that passes through the path receives the event, which can be called the DOM event stream.

　　For historical reasons, IE was the first to implement the way the event stream was implemented: bubbling events (event bubbling),Netscape proposed another way of event flow: Event Capture (capturing), There are some differences in the implementation of different browsers, which are cumbersome to use. Fortunately, modern browsers have implemented the "DOM2-level event" developed by the web, and the "DOM2-level event" divides the event stream into three stages, capturing phase, target stage, and bubbling stage.

Online borrowing map:

　　

Iii. What is an event agent?

With so much groundwork in front of you, it's easy to understand the event proxy now. an event proxy is an event that is bound to an ancestor-level DOM element that, when triggered by an event that triggers a descendant-level DOM element, uses the principle of the event stream to trigger an event bound to an ancestor-level dom. sounds like a bit of a detour, here's a simple code implementation:

<!--omit HTML body parts --<ulID= "Menu">    <Li><P><a>If I were to be the flop, I would have a chance to become a great God!</a></P></Li>    <Li><P><a>If I were to be the flop, I would have a chance to become a great God!</a></P></Li>    <Li><P><a>If I were to be the flop, I would have a chance to become a great God!</a></P></Li>    <!--omit 1000000 lines in the middle -    <Li><P><a>If I were to be the flop, I would have a chance to become a great God!</a></P></Li></ul> 　　 

// Get the Ancestor node (get UL here) and add a click event to it function (e) {  //  Check if event source E.targe is a  if(E.target && E.target.nodename.touppercase = = "A") {      console.log ("I'll go with you tonight .....");}  );

The ability of the browser is still limited, and for security reasons, the memory allocated to the browser by the system is limited. In particular, some older browsers, if there are too many events added to the DOM, can cause the performance of the Web page to degrade or even crash. Look at me above the UL below the A node is 1000004, if really for all the A tag plus an event, this price is very large. With the event agent, we saved 1,000,003 events, which is simply too powerful.

General browser triggering events are all in the bubbling phase, and if you want to trigger events in the capture phase you can set the AddEventListener third parameter to True,addeventlistener ("click", Function (e) {}, True).

Summary: The foundation is very important, understand the foundation, the principle is so simple!

　　

JavaScript event Broker (delegate) principle parsing