JS's event monitoring mechanism

A long time ago, there was a girl named Netscape, who developed a set of JavaScript event-driven mechanisms (that is, event capture)

Later, there is a "IE" of the boy, the child is more arrogant, he thought "with what I want to follow your rules", so he created a set of his own rules (event bubbling)

Later, there was a matchmaker called the people's, want to set up the two children, the characteristics of their integration together, this, the sequence of events to become:

The event starts from the root node and is dispatched to the child node, and if the node binds the event action, the action is executed and then continues, which is called the " capture phase";
After the capture phase is executed, the event is dispatched to the root node by the child node, and if the node binds the event action, the action is performed and then continues, which is called the bubbling Phase (Bubble).

The good Netscape and their sisters accepted the matchmaker's advice and adopted the new event rules, and the proud and stubborn IE kid always executes according to his own rules. This eventually makes it one of the compatibility issues that plague front-end developers. So, how do you bind events?

Due to the differences between the two browsers, the method of binding is not the same, where the standard browser uses the AddEventListener function binding defined by the Web, the function is defined as follows:

function AddEventListener (string eventflag, function Eventfunc, [bool Usecapture=false])
Eventflag:	Event name, such as Click, MouseOver ...
Eventfunc:	Binding to an action performed in an event
Usecapture:	Specifies whether to bind in the capture phase, true to Yes, false to No, and true by default Event.stoppropagation () can be used in the event listener stream to prevent the event from continuing to flow down

IE uses its own attachevent function binding time, the function is defined as follows:

function attachevent (string eventflag, function Eventfunc)
Eventflag:	Event name, but add on, such as OnClick, onmouseover ...
Eventfunc:	Binding to an action performed in an event

Window.event.cacenlbubble=false can be used in the event listener stream to prevent the event from continuing to flow down

Summary: AddEventListener (string eventflag, function Eventfunc, [bool Usecapture=false]), for Ff,chrome,safari browser, false refers to bubbling phase , the default is true, which refers to the capture phase. But generally we all use false.

Attachevent (string eventflag, function Eventfunc), for IE series, and Opera browser, less the event handling mechanism parameters, only specify the event type (do not forget on) and trigger which function.

With these perceptions, there is a general idea of the corresponding code:

if (Document.addeventlistener) {Document.addeventlistener (false);

Hide the function in the Document binding information box (the one on the vertical) (that is, where you can close the expanded message box with any HTML page, which is also why you use Document.addeventlistener, to help on the document)

false);

In the Status_hide node binding information box, expand (The detailed one) function and stop the event stream (that is, click on the vertical, expand the detailed one)

false);

Because false determines the event bubbling, in order to prevent point details, bubbles up to document, triggering the click of the document setting Hidebox method, in Status_show we want to bind the block event stream function.

This understand, for IE and then write a attachevent can, of course, ie parameters only 2 can be, its time processing mechanism is bubbling without additional settings.

The last part is to talk about this function.

document.getElementById (' Status_show '). AddEventListener (' Click ', Stopevent, false);

It can be determined that it prevents the bubbling that was mentioned earlier, and raises the Click event that should not be raised.

But what about it? Function (event) {e = Event | | window.event}

JS's event monitoring mechanism