Cross-browser event objects in a detailed
Encapsulating Event Objects
1 varEvent_util = {2 //Add Event3AddHandler:function(element, type, handler) {4 if(element.addeventlistener) {5Element.addeventlistener (type, Handler,false); 6}Else if(element.attachevent) {7Element.attachevent ("on" +type, handler);8}Else {9Element["on" + type] =handler; Ten } One }, A //Removing events -RemoveHandler:function(element, type, handler) { - if(element.removeeventlistener) { theElement.removeeventlistener (type, Handler,false); -}Else if(element.detachevent) { -Element.detachevent ("on" +type, handler); -}Else { +Element["on" + type] =NULL; - } + }, A //Get Event Object atGetEvent:function(event) { - returnEvent?event:window.event; - }, - //Get Event Destination -Gettarget:function(event) { - returnEvent.target | |event.srcelement; in }, - //Block Event bubbling toStoppropagation:function(event) { + if(event.stoppropagation) { - event.stoppropagation (); the}Else { *Event.cancelbubble =true; $ }Panax Notoginseng }, - //Cancel Event default behavior thePreventdefault:function(event) { + if(event.preventdefault) { A Event.preventdefault (); the}Else { +Event.returnvalue =false; - } $ } $};
View Code
Save the Event_util object to an "event object. js" file for easy invocation.
HTML code
1 <! DOCTYPE html> 3 < Head> <meta charset=" utf-8 "> 5 <title> Event Object Example </title> 7 <body> 8 <div id= "box" > 9 <input type= "button" id= "BTN" value= "button" >10 <a href= "http://www.baidu.com" id= "link" > Baidu </a>11 </div> ; 12 <script src= "event object. js" ></script> 13 </body>14
Detecting Event Types
1 var btn = document.getElementById ("btn"); 2 function (event) {3 event = event_util.getevent (event); 4 alert (event.type); // "click" 5 });
Detecting event targets
1 var btn = document.getElementById ("btn"); 2 function (event) {3 alert (Event_util.gettarget (event)); // Object Htmlinputelement 4 });
Block event bubbling
1 varBTN = document.getElementById ("btn");2 vardiv = document.getElementById ("box");3Event_util.addhandler (BTN, "click",function(event) {4Alert ("You ' ve clicked the button."));5event =event_util.getevent (event);6 event_util.stoppropagation (event);7 });8Event_util.addhandler (Div, "click",function() {9Alert ("You ' ve clicked the Div."));Ten});
Cancel event default behavior
1 var link = document.getElementById ("link"); 2 function (event) {3 alert ("This link will not jump! "); 4 event = Event_util.getevent (event); 5 Event_util.preventdefault (event); 6 });
Note: When dealing with an event object, remember to pass in the event parameter, and once you pass in the event parameter, remember to call Event_util.getevent ().
JS Event (4)--cross-browser event object