Event Flow
The event flow is a description of the order in which events are accepted from the page, and when several elements with events cascade together, then you click on one of the elements, not only the currently clicked element will trigger the event, but all the elements stacked in your click range will trigger the event. The event flow consists of two modes: bubbling and capturing.
Event bubbling is triggered from inside to outside. Event captures are triggered from the outside to the inside. Modern browsers, by default, are bubbling models, while capture mode is the default for early Netscape. Today's browsers use the event-binding mechanism of the DOM2-level model to manually define the event flow pattern.
<Scripttype= "Text/javascript">window.onload= function() {Document.onclick= function() {alert ('I'm the document .'); }; Document.documentElement.onclick= function() {alert ('I am the HTML'); }; Document.body.onclick= function() {alert ('I'm the body .'); }; document.getElementById ('Box'). onclick= function() {alert ('I'm the div .'); }; document.getElementsByTagName ('input')[0].onclick= function() {alert ('I'm input .'); }; }; </Script></Head><Body> <DivID= "box"style= "width:100px; height:100px; Background-color: #F00"> <inputtype= "button"value= "button"/> </Div></Body>
Stop bubbling
<Scripttype= "Text/javascript">window.onload= function() {Document.onclick= function() {alert ('I'm the document .'); }; Document.documentElement.onclick= function() {alert ('I am the HTML'); }; Document.body.onclick= function() {alert ('I'm the body .'); }; document.getElementById ('Box'). onclick= function() {alert ('I'm the div .'); }; document.getElementsByTagName ('input')[0].onclick= function(evt) {vare=evt||window.event; Alert ('I'm input .'); E.stoppropagation ()}; };</Script></Head><Body> <DivID= "box"style= "width:100px; height:100px; Background-color: #F00"> <inputtype= "button"value= "button"/> </Div></Body>
JavaScript Event Object _ Event Stream