Event flow and event bubbling in JavaScript

/****************************************** Event Flow **************************************************/
The event flow is the order in which the page accepts events.
IE uses a time bubbling stream, whereas the Netscape event uses an event capture stream.
1. Event bubbling
JS and HTML are interactive through the way events are implemented.
Event bubbling begins the element, passing the event step by step (example: When you click on a button you click the HTML always document).

/**************************************** 2 Event Handling *************************************************/
1, DOM0 level Event processing
var btn2 = document.getElementById (' btn2 ');
Btn2.onclick=function () {
Alert (' Holle word! ');
}
Clear DOM0 Level Event handling
Btn2.onclick=null;

2. DOM2 level Event handling can bind multiple events
Non-IE DOM2 event handling
var btn3 = document.getElementById (' btn3 ');
Btn3.addeventlistener (' click ', function () {
Alert (' Btn3 ');
},false);
Btn3.addeventlistener (' click ', Showmessge
},false);
Fucntion Showmessge () {
Alert (' text01 ');
}
Btn3.removeeventlistener (' click ', Showmessge,false);

IE DOM2 Event Handling
Btn3.attachevent (' onclick ', showmessge);
Btn3.detachevent (' onclick ', showmessge);

/**************************************** 2 Event Handling **************************************************/

/**************************************** 3 Event Object **************************************************/
1. Event objects in the DOM
(1), type: Get event Type
(2), Target: Event target
(3), Stoppropagation () block event bubbling
(4), Preventdefault () The default behavior for blocking events

2, the event object in IE
(1), the Type property gets the event type
(2), srcelement property gets the source of the event
(3), cancelbubble property
(4), returnvalue block event behavior false block
/**************************************** 3 Event Object **************************************************/

/**************************************** Simple Package ****************************************************/
var eventutil={
Add handle
Addhandler:function (Element,type,handler) {
if (Element.addeventlistener) {
Element.addeventlistener (Type,handler,false);
}else if (element.attachevent) {
Element.attachevent (' on ' +type,handler);
}else{
element[' on ' +type]=handler;
}
},
Delete Handle
Removehandler:function (Element,type,handler) {
if (Element.removeeventlistener) {
Element.removeeventlistener (Type,handler,false);
}else if (element.detachevent) {
Element.detachevent (' on ' +type,handler);
}else{
element[' on ' +type]=null;
}
},
Get this event
Getevent:function (event) {
return event?event:window.event;
},
Get Event Type
Gettype:function (event) {
return event.type;
},
Get Object
Getelement:function (event) {
return Event.target | | Event.srcelement;
},
Default events for blocking objects
Preventdefault:function (event) {
if (Event.preventdefault) {
Event.preventdefault ();
}else{
Event.returnvalue=false;
}
},
Block event bubbling
Stoppropagation:function (event) {
if (event.stoppropagation) {
Event.stoppropagation ();
}else{
Event.cancelbubble=true;
}
}
}

Event flow and event bubbling in JavaScript