Interaction between JavaScript and HTML is achieved by the event. The event is certain interactions occur instantaneously document or browser window. Since the event is generated by the interaction of a number, it is necessary to understand these events are generated by the interaction which part of the page.
Event stream
It describes the sequence of event stream received from the event page. But it is interesting, IE and Netscape development team actually put forward the concept is almost the exact opposite of the event flow. IE's event stream is an event bubbling streams, and Netscape Communicator event stream is event capture stream.
IE proposed by bubbling event stream is an event stream, the event stream which communication is passed from the inside out . That event starts receiving the most specific elements (document deepest nesting level of the node), and then progressively spread upward to not more specific node (the document). such as:
<!DOCTYPE type>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div>
<button></button>
</div>
</body>
</html>
In the above example, if you click on one of the button label, then the event bubbling given by definition, its dissemination process flow of events for the button -> div -> body - > html -> document . That is when the button is clicked the button, the event started by the event source is transmitted to the outer element layer by layer, until transferred to the document element.
In addition, all modern browsers support event bubbling, but there are some differences in implementation. IE5.5 and earlier will skip the event bubbling element (jump directly from document). IE9, Firefox, Chrome and Safari will have been bubbling event to the window object.
Netscape Communicator raised Event stream capture mode of transmission for the event flow, and event capture stream is spread from the outside to the inside. That event capture thoughts are less specific node should be received earlier event, and most specific nodes should last received event. Event capture is intended to capture the event before it reaches the intended target. This is precisely the idea and event bubbling almost exactly the opposite.
Also with the above example, according to event capture ideas, the event propagation process is: document -> html -> body -> div -> button. In the event capture process, document subject first receives the click event on the button, and then sequentially down event in the DOM tree (outside-in), the event has been propagated to the actual target, i.e., the event source button element.
Note that although the event capture the event flow model Netscape Communicator is the only support, but IE9, Safari, Chrome, Opera and Firefox now also support this event stream model. As the old version of the browser is not supported, so few people use event capture.
DOM event flow
Event provisions "DOM2-level event" stream consists of three phases: the capture phase of the event, in the event the target and bubbling phases. First occurrence of the event is captured, the event provides an opportunity to intercept. Then the actual target event is received. The final stage is the bubbling phase, we can respond to incidents at this stage. as follows:
<!DOCTYPE type>
<html>
<head>
<title>DOM事件流</title>
</head>
<body>
<div>
<button></button>
</div>
</body>
</html>
In the DOM event flow, after clicking the button element, the actual target (element) does not receive the event in the capture phase. This means that the capture stage, and then to the final document from the event to
event.stopPropagation()
event.cancleBubble = true
This is to prevent the two methods event bubbling , let the event spread to the document, but the default event will execute any course, when you are using one of these two methods for a link, if you click the link, the link will still be open, event bubbling but was blocked. It is compatible with the wording:
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
event.preventDefault()
event.returnValue = false
This is to prevent the default behavior in two ways , the first method is provided by the W3C, the second method is proposed IE. When using one of these two methods for a link, the link will not be opened, but the event bubbling occurs;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue= false;
}
vreturn false
This method can be achieved while preventing the default behavior and event bubbling. That is, when the use of a link, this link will not be achieved Hit the jump page, and it will not be bubbling up the dom tree.