The event mechanism of JavaScript

first, the event model
Event models for IE and standard DOM
IE System: Bubbling mode
Netscape System: Capture mode
Standard DOM: capturing and bubbling first

Bubbling, from the trigger point to the outer, top layer spread, and finally arrived at document, window, encountered the same registration event immediately triggered execution;
Capture the opposite, from window, document into the contraction, until the trigger point, encountered the same registration event immediately triggered execution;

The code is as follows:

<style type="Text/css"> Div {  border: solid 1px red;}  #s1  {  padding: tenpx;  border-color: blue; }</style><div id="S1">S1<div id="s2">S2</div></div><script type="Text/javascript">if(document.attachevent) {//ie Browserdocument.getElementById ("S1"). Attachevent ("onclick", function(e){Alert"S1 bubble Mode");    }); document.getElementById ("S2"). Attachevent ("onclick", function(e){Alert"s2 bubble Mode"); });}Else{S1.addeventlistener ("click", function() {Alert"S1 capture Mode"); },true); S2.addeventlistener ("click", function() {Alert"s2 capture Mode"); },true); S1.addeventlistener ("click", function() {Alert"S1 bubble Mode"); },false); S2.addeventlistener ("click", function() {Alert"s2 bubble Mode"); },false);}</script>

The page is as follows:

In non-IE browser, click on the inner layer of the S2, followed by the following, clearly embodies the first capture, after bubbling features:

s1捕获模式s2捕获模式s2冒泡模式s1冒泡模式

If it is an IE browser, then prompt

s2冒泡模式s1冒泡模式

ii. Registration of events
Similar to this,

Standard DOM

s1.addEventListener("click"function() {      alert("捕获模式");    true);s1.addEventListener("click"function() {      alert("冒泡模式");    false);  

Ie

document.getElementById("s1").attachEvent("onclick",function(e){        alert("IE下注册事件");});

iii. interruption of events
Under standard DOM:

Event.stoppropagation//Prevent further propagation of events, except for this node
Event.stopimmediatepropagation//immediate interruption of event propagation, including this node
Event.preventdefault ()//block the occurrence of default events. For example, by clicking the Submit control, submission is the default event.

IE under:

Window.event.cancelBubble = true; Prevent further propagation of events, except for this node
Window.event.returnValue = false;//Prevents the occurrence of default events

The code is as follows:

<style type="Text/css"> Div {  border: solid 1px red;}  #s1  {  padding: tenpx;  border-color: blue; }</style><form id="F1"><div id="S1">S1<div id="s2">S2</div>  <div><input type="Submit" id= "B1" value="Submit" /></div></div></form><script type="Text/javascript">if(document.attachevent) {//ie Browserdocument.getElementById ("S1"). Attachevent ("onclick", function(e){Alert"S1 event");    }); document.getElementById ("S2"). Attachevent ("onclick", function(e){Alert"S2 Event");    }); document.getElementById ("B1"). Attachevent ("onclick", function(e){Alert"B1 Click event 1"); Window.event.cancelBubble =true;//Make the S1 event invalid; B1 Click event 2 is not affected, still executed (S2 event is not related to this click, always will not be triggered)Window.event.returnValue =false;//Make F1 commit event invalid}); document.getElementById ("B1"). Attachevent ("onclick", function(e){Alert"B1 Click event 2");    }); document.getElementById ("F1"). Attachevent ("OnSubmit", function(e){Alert"Submit ..."); });}Else{S1.addeventlistener ("click", function() {Alert"S1 event"); },false); S2.addeventlistener ("click", function() {Alert"S2 Event"); },false); B1.addeventlistener ("click", function(evt) {Alert"B1 Click event 1"); Evt.stoppropagation ();//Make the S1 event invalid; B1 Click event 2 is not affected, still executed (S2 event is not related to this click, always will not be triggered)Evt.stopimmediatepropagation ();//Make B1 Click event 2,s1 event Invalid;Evt.preventdefault ();//Make F1 commit event invalid},false); B1.addeventlistener ("click", function(evt) {Alert"B1 Click event 2"); },false); F1.addeventlistener ("Submit", function() {Alert"Submit ..."); },false);}</script>

Resources:
Questions JavaScript event mechanism

The event mechanism of JavaScript