JS's event monitoring mechanism

Source: Internet
Author: User
Tags event listener

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(stringfunction 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(‘click‘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)

document.getElementById(‘status_hide‘).addEventListener(‘click‘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)

document.getElementById(‘status_show‘).addEventListener(‘click‘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.

var stopEvent = function(eventevent || window.eventif(e.stopPropagation){ e.stopPropagation(); }elsetrue; } };

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.