JavaScript encapsulates a DOM event handler as a low-level error record that appears in Event.js

The DOM level 0 event handler and the DOM2 event handler IE event handler are encapsulated as Eventutil objects for cross-browser effects. The code is as follows:

varEventutil = {    //To add an event handleaddEventHandler: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; }    },    //To delete an event handleremoveEventHandler: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 Event ObjectGetEvent:function(event) {returnEvent?event:window.event; },    //gets the type of eventGetType:function(event) {returnEvent.type; },    //Get Event Object targetGettarget:function(event) {if(event.target) {returnEvent.target; }Else{            returnevent.srcelement; }    },    //Block Event bubblingStoppropagation:function(event) {if(event.stoppropagation) {event.stoppropagation (); }Else{event.cancelbubble=true; }    },    //Block event default behaviorPreventdefault:function(event) {if(Event.preventdefault) {event.preventdefault (); }Else{Event.returnvalue=false; }    }}

In the practice of code, there are several errors in the place, resulting in a run error, record, deepen memory.

① Adding a handle is the location of the obfuscation parameter: first, the arguments for the addEventHandler (Element,type,handler), respectively, which element elements add an event, the type of the event, the event handler handler. It is easy to confuse the handler with the position of false in the back Addeventlister (Type,handler,false), which indicates the bubbling phase.

Lead to the result: in the process of writing, I seriously think about it, understand what parameters addEventHandler need to know which position to use which parameters, the final write to, did not lead to errors.

The solution: understand and remember.

② in the IE Event processing program to determine the branch, attachevent and detachevent spelling errors, less event, only write attach or detach.

Result: Although there are no errors, you cannot add or remove events in IE using addEventHandler and removeeventhandler.

Solution: Practice and remember more. Attachevent and DetachEvent.

③ forgot that the event type is required to be "on" in the parameters of the IE event handler attachevent and DetachEvent, and is written as attachevent (Type,handler). In fact the right should be attachevent ("on" +type,handler), and also forget the DOM0 level event processing of the Judgment branch

Result: Similarly, ie event handling cannot be compatible. Adding or removing events in an encapsulated way on IE does not succeed.

Solution: You can only remember. It is also important to note that the DOM0-level event element["on" +type this way. For example, element["on" + "click" is equivalent to Element.onclick.

④ the end of the last property is also comma-like in the block event default behavior preventdefault: Add a comma after completion, such as the following code snippet (note)

  Preventdefault:function  (event) {        if  (event.preventdefault) {            Event.preventdefault ();        } Else {            Event.returnvalue=false;        }    },//  The last attribute Preventdefault is completed with a comma, error }

Result: Run the Times error in IE (where event.js 54 lines are the last comma's next line, which is actually the result of a comma; the 10th line of test.html is because the Eventutil.addeventhandler method in Event.js is called)

Workaround: No doubt, remove the last comma.

⑤ or spelling errors, ie block event bubbling property cancelbubble, write more than a s, written cancelbubbles.

Result: no error, but unable to block event bubbling in IE.

Workaround: Change back

JavaScript encapsulates a DOM event handler as a low-level error record that appears in Event.js