JavaScript encapsulates DOM event handlers as low-level error problems with Event.js _javascript tips

The

Encapsulates the DOM 0-level event handler and the DOM2-level event handler (ie event handler) as a Eventutil object for Cross-browser effects. The code is as follows:

var eventutil = {//Add event handle Addeventhandler:function (Element,type,handler) {if (Element.addeventlistener) {Element.add
EventListener (type, handler,false); }else if (element.attachevent) {element.attachevent ("on" +type,handler);} else {element[' on ' +type]=handler}},//delete event handle removeeventhandler:function (Element,type,handler) {if (element.remove EventListener) {Element.removeeventlistener (type, handler,false);} else if (element.detachevent) {element.detachevent ("on" +type,handler);}
else {element[' on ' +type]=null},//Get the Event object Getevent:function (event) {return event?event:window.event;},//Get the type of the event Gettype:function (event) {return event.type},//Get Event object target Gettarget:function (events) {if (event.target) {return event
. Target; }else{return Event.srcelement}},//block event bubbling stoppropagation:function (events) {if (event.stoppropagation) {Event.stopp
Ropagation (); }else{Event.cancelbubble=true}},//block event default behavior preventdefault:function (event) {if (Event.preventdefault) {Event.prevEntdefault ();
}else{Event.returnvalue=false}} }

In the practice of the code, oneself appeared a few errors, resulting in a run error, record, deepen memory.

① Adding a handle is the location of a confusing parameter: first, the addEventHandler (element,type,handler) arguments are added to which element elements, the type type of the event, the event handler function handler. It is easy to confuse the position of false (which represents the bubbling phase) in handler and back Addeventlister (Type,handler,false).

Lead to the result: in the process of writing, I think about it carefully, understand what parameters addEventHandler need, know which position to use which parameter, finally write right, not cause error.

Solution: Understand and remember.

② in the IE event handler judgment Branch, attachevent and detachevent spelling errors, less event, only write attach or detach.

Results: Although there are no errors, you cannot use addEventHandler and removeEventHandler to add or remove events in IE.

Solution: Practice memorizing. Attachevent and DetachEvent.

③ forgot that the event type needed to be added "on" in the IE event handler attachevent and DetachEvent parameters, and was written in Attachevent (Type,handler). In fact, it should be the attachevent ("on" +type,handler), and also forget the DOM0-level event processing of the branch of Judgment

Results: Similarly, it is not compatible with IE event handling. Adding or deleting an event with an encapsulated method on IE does not succeed.

Solution: also can only remember. One more thing to note: element["on" +type in DOM0-level events. For example, element["on" + "click"] is equivalent to Element.onclick.

④ the end of the last property is also comma, such as the default behavior of blocking events Preventdefault: After completion, add commas, such as the following code fragment (note)

Preventdefault:function (event) {
if (event.preventdefault) {
event.preventdefault ();
} else{
event.returnvalue=false
}
},//the last property Preventdefault completed with a comma, error
}

Results: Running the times in IE wrong (where Event.js's 54 lines are the next line of the last comma, which is actually the result of commas; the 10th line of test.html is because the Eventutil.addeventhandler method in Event.js is invoked)

Solution: No doubt, remove the last comma.

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

Result: no error, but cannot prevent event bubbling in IE.

Solution: Change back

The above is a small set of JavaScript to introduce the DOM event handler package for the event.js of the low-level error problem, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!