JavaScript encapsulates DOM event handlers as event. js low level error issues

  • 2021-07-07 06:28:40
  • OfStack

DOM Level 0 event handler and DOM Level 2 event handler are encapsulated as eventUtil objects to achieve cross-browser effect. The code is as follows:


var eventUtil = {
//  Add an event handle 
addEventHandler: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 event handles 
removeEventHandler: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 an event object 
getEvent:function (event) {
return event?event:window.event;
},
//  Gets the type of event 
getType:function (event) {
return event.type;
},
//  Get the Event Object Target 
getTarget:function (event) {
if (event.target) {
return event.target;
}else{
return event.srcElement;
}
},
//  Prevent events from bubbling 
stopPropagation:function (event) {
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
//  Block event default behavior 
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
}
}

When practicing the code, I made several mistakes, which led to running errors. Record 1 and deepen my memory.

(1) Adding handles is the location of confusing parameters: First, the parameters of addEventHandler (element, type, handler) respectively indicate which element element to add events, the type of events type, and the event handler handler. It is easy to confuse the position of handler with false (representing bubbling stage) in addEventLister (type, handler, false).

Result: In the process of writing, I carefully thought about it for 1 time, understood which parameters addEventHandler needed, and knew which parameters should be used in which position. Finally, I wrote it correctly without causing errors.

Solution: Understand and remember.

② In the judgment branch of IE event handler, attachEvent and detachEvent are misspelled, Event is missing, and only attach or detach is written.

Result: No errors are reported, but events cannot be added or removed from IE using addEventHandler and removeEventHandler.

Solution: Just practice and remember. attachEvent and detachEvent.

③ Forget that the event type needs to be added with "on" in the parameters of IE event handlers attachEvent and detachEvent; It is written as attachEvent (type, handler). In fact, the correct one should be attachEvent ("on" + type, handler), and forget that there is also the judgment branch of DOM level 0 event processing

Result: Again, it is incompatible with IE event handling. Adding or deleting events with encapsulation on IE cannot succeed.

Solution: You can only remember it. One more point to note: element ["on" + type] in DOM level 0 events. For example, element ["on" + "click"] is equivalent to element. onclick.

(4) Add a comma at the end of the last attribute, for example, add a comma after the default behavior of blocking events preventDefault: is completed, such as the following code snippet (comment)


preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue=false;
}
},// Finally 1 Attributes preventDefault A comma is added after completion, and an error will occur 
}

Result: Error when running in IE (where line 54 of event. js is the next line of the last comma, which is actually caused by the comma; line 10 of test. addEventHandler is due to the call to the eventUtil. addEventHandler method in event. js)

Solution: No doubt, just remove the last comma.

⑤ It is still a spelling mistake. The attribute cancelBubble in IE, which prevents events from bubbling, is written with one more s and is written as cancelBubbles.

Result: No error is reported, but it cannot prevent the event bubbling in IE.

Solution: Change it back


Related articles: