JS event bubbling and snapping

(1) Bubbling event: The event is triggered in the order from the most specific event target to the least specific event target (Document object).

IE 5.5:div, Body, document

HTML--Document, body, IE 6.0:div

Mozilla 1.0:div, body, HTML, document, window

(2) Capture event (event capturing): Events are triggered from the most imprecise object (Document object) and then to the most accurate (and can also be captured at the window level, but must be specifically specified by the developer).

(3) DOM event Flow: Supports both event models: capture-type and bubbling-type events, but capture-type events occur first. The two event streams touch all objects in the DOM, starting with the document object and ending at the Document object.

The most unique nature of the DOM event model is that text nodes also trigger events (not in IE).

Browsers that support the Internet standard Use the AddEventListener (event,fn,usecapture) method when adding an event, Kizhong the 3rd parameter usecapture is a Boolean value that is used to set the event to be executed when the event is captured, Or when the event bubbles. and the browser (IE) is not compatible with the Attachevent () method, this method does not have the relevant settings, but the IE event model by default when the event bubbling, that is, when the usecapture equals false execution, So it is safer to set Usecapture to false when handling events, and also to achieve a compatible browser effect.

Event Capture phase: Events are looked up from the top level of the label until the event target is captured.
Event bubbling stage: The event starts with the event target and bubbles up to the top level of the page label.

Suppose an element Div, which has a subordinate element p.
<div>
<p> Elements </p>
</div>
Both of these elements are bound to the Click event, and if the user clicks P, it triggers the Click event on both Div and P, which of the two event handlers executes first? What is the order of events?

Two types of models
Previously, Netscape and Microsoft were different implementations.

In Netscape, the div is triggered first, which is called event capture.

In Microsoft, p is triggered first, which is called event bubbling.

The two kinds of event processing order are reversed. IE only supports event bubbling, Mozilla, Opera 7 and Konqueror two support, older versions of opera ' s and icab two are not supported.

Event capture
When you use event capture, the parent element is triggered first, the child element is triggered, that is, the div is triggered first, and P is triggered.

Event bubbling
When you use event bubbling, the child element is triggered first, the parent element fires, that is, p fires first, and the div fires.

Model
The model is to neutralize the two, and in the model, when any event occurs, the event is captured first from the top level until the event trigger arrives at the event source element. Then, the event bubbles up from the event source until the document is reached.

The programmer can choose whether to use event capture or event bubbling when binding an event by using the AddEventListener function, which has three parameters, and if the third parameter is true, the event is captured, or false, which indicates that event bubbling is used.

Ele.addeventlistener (' click ', dosomething2,true)

True= capture

False= Bubble

Traditional bound Event mode
In a browser that supports the DOM, the usual way to bind events is to use event bubbling.

Ele.onclick = DoSomething2

IE browser
As mentioned above, IE only supports event bubbling, does not support event capture, it does not support the AddEventListener function, does not use a third parameter to indicate whether it is bubbling or capturing, and it provides another function attachevent.

Ele.attachevent ("onclick", doSomething2);

Attached: event bubbling (The process): the event from which the object occurred (event.srcelement| | Event.target) starts by bubbling up the document up and down, to the documents.

The propagation of events can be prevented:
? In the Stoppropagation () method, use the
? Set cancelbubble = True under IE;
Stoppropagation () in the process of capture, the subsequent bubbling process does not occur ~
3. Blocking the default behavior of the event, such as Click <a> Jump ~
? Use the Preventdefault () method in the user's list;
? Set Window.event.returnValue = False under IE;

First, explain the difference between the two methods of Preventdefault and Stoppropagation in JS:
What role does the Preventdefault method play? We know for example <a href= "http://www.baidu.com" > Baidu </a>, this is the most basic HTML things, the role is to click Baidu Link to http://www.baidu.com, which belongs to The default behavior of the <a> tag, and the Preventdefault method is to prevent its default behavior from occurring and other things happen. Look at a piece of code and everyone understands:

Copy the code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js Block link Jump </title>
<script type= "Text/javascript" >
function Stopdefault (e) {
if (e && e.preventdefault)
E.preventdefault ();
Else
Window.event.returnValue = false;

return false;
}
</script>
<body>
<a href= "http://www.baidu.com" id= "Testlink" > Baidu </a>
<script type= "Text/javascript" >
var test = document.getElementById (' Testlink ');
Test.onclick = function (e) {
Alert (' My link address is: ' + This.href + ', but I won't jump. ‘);
Stopdefault (e);
}
</script>
</body>

Click the Baidu link at this time, will not open http://www.baidu.com, but just pop up a alert dialog box.

Preventdefault method to explain here, Stoppropagation method? Before speaking stoppropagation method, we must first explain the JS event agent.

The event agent uses two features that are often ignored in the Javasciprt event: event bubbling and the target element. When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. For any event, the target element is the original element, which is the button in our example. The target element it appears as an attribute in our event object. With the event agent, we can add an event handler to an element, wait for the event to bubble up from its child elements, and easily determine which element the event starts with.

Stoppropagation method is to prevent the role of the JS event bubbling, see a piece of code.

Copy the code code as follows:
<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd ">
<title> Block JS event bubbling Pass (cancelbubble, stoppropagation) </title>
<meta name= "keywords" content= "JS, event bubbling, cancelbubble,stoppropagation"/>
<script>
function DoSomething (obj,evt) {
alert (obj.id);
var e= (evt)? evt:window.event;
if (window.event) {
e.cancelbubble=true;//ie block bubble
} else {
E.preventdefault ();
E.stoppropagation ();//block Bubbling under other browsers
}
}
</script>
<body>
<div id= "Parent1" onclick= "alert (this.id)" style= "width:250px;
<p>this is Parent1 div.</p>
<div id= "Child1" onclick= "alert (this.id)" style= "width:200px;
<p>this is child1.</p>
</div>
<p>this is Parent1 div.</p>
</div>
<br/>
<div id= "Parent2" onclick= "alert (this.id)" style= "width:250px;" >
<p>this is Parent2 div.</p>
<div id= "child2" onclick= "dosomething (this,event);" style= "width:200px;" >
<p>this is child2. Would bubble.</p>
</div>
<p>this is Parent2 div.</p>
</div>
</body>
</HTML>

Let's run the code above and you'll see.

JS event bubbling and snapping