JS Event (Event bubbling and event capture)

Event Flow: Describes the order in which events are received in a page event bubbling: Node (document) event captures that are received by the most specific element and then propagated up to the least specific element: the least specific node receives the event first, The most specific node should be the last receive event DOM: Operations AddEventListener () and RemoveEventListener () for handling the specified and deleted event handlers. They all receive three parameters: the name of the event to be processed, the function as the event handler, and the Boolean value (when the event is handled) [true: When the event is captured;false: When event Bubbling] Event object in DOM: The Type property is used to get the event type; The target property is used to get the event target Stoppropagation () method to block the event bubbling Preventdefault () method Default behavior for blocking events in IE: attachevent () and DetachEvent (), receive the same two: the name of the event handler and the function of the event handler. Event object in IE: the Type property is used to get the event Type Srcelement property is used after the Go event destination cancelbubble property to block event bubbling [true: Block event bubbling;false: Do not block event bubbling;] The ReturnValue property is used to block the default behavior of an event [false: The default behavior of blocking events;] Test examples:varEventutil = {//Add EventAddHandler:function(element, type, handler) {if(element.addeventlistener) {//non-IE underElement.addeventlistener (type, Handler,false);}Else if(element.attachevent) {element.attachevent (' On ' +type, handler);}Else{//ie underelement[' on ' + type] =handler;}},//Delete EventRemoveHandler:function(element, type, handler) {if(element.removeeventlistener) {//non-IE underElement.removeeventlistener (type, Handler,false);}Else if(element.detachevent) {element.detachevent (' On ' +type, handler);}Else{//ie underelement[' on ' + type] =NULL;}},//Get target elementGetElement:function(event) {returnEvent.target | |event.srcelement;},//block default behaviorPreventdefault:function(event) {if(event.preventdefault) {//non-IE underEvent.preventdefault ();}Else{//ie underEvent.returnvalue =false;}},//Block Event bubblingStoppropagation:function(event) {if(event.stoppropagation) {//non-IE underevent.stoppropagation ();}Else{//ie underEvent.cancelbubble =true;}}};varBTN =NULL, div =NULL; Window.onload=function() {btn= document.getElementById (' id ')); Eventutil.addhandler (document.getElementById (' divID '), ' click ', showdivmsg); Eventutil.addhandler (document.getElementById (' Addid '), ' click ', addevent); Eventutil.addhandler (document.getElementById (' RemoveID '), ' click ', removeevent);}functionaddevent () {Eventutil.addhandler (BTN,' Click ', showmsg);}functionremoveevent () {Eventutil.removehandler (BTN,' Click ', showmsg);}functionShowMsg (Event) {Alert (Eventutil.getelement (event). getattribute (' data ') + ' events '); Eventutil.preventdefault (event); Eventutil.stoppropagation (event);}functionshowdivmsg () {alert ("Div Event");}</script>
JS Event (Event bubbling and event capture)