Encapsulate the DOM level 0 event handler and the DOM2 level event handler IE event handler into eventUtil objects to achieve cross-browser effect. The code is as follows:
var eventUtil = {// Add 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 handle 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 the event object getEvent:function (event) {return event?event:window.event;},// Get 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;}},// Get the event object target getTarget:function (event) {if (event.target) {return event.target;}else{return event.srcElement;}},// Get the event object target getTarget:function (event) {if (event.target) {return event.target;}else{return event.srcElement;}},// stop event bubble stopPropagation:function (event) {if (event.stopPropagation) {event.stopPropagation();}else{event.cancelBubble=true;}},// Prevent event default behavior preventDefault:function (event) {if (event.preventDefault) {event.preventDefault();}else{event.returnValue=false;}}}While practicing the code, I made several errors, which caused the operation error. Record it and deepen my memory.
① Adding a handle is the location where the parameter is obfuscated: First, the parameters of addEventHandler(element, type, handler) respectively representing which element element is added to the event, the type of the event, and the event handling function handler. You are prone to confuse the positions of handler and false (representing the bubbling stage) in the later addEventLister(type, handler, false).
Leading to the result: During the writing process, I thought about it carefully and understood which parameters needed by addEventHandler, and then I knew which parameter to use at which position. Finally, I wrote it correctly, and did not cause an error.
Solution: Understand and remember.
② In the IE event handler judgment branch, attachEvent and detachEvent are spelled incorrectly, and Event is missing, and only attach or detach is written.
Cause the result: Although there is no error, it is impossible to add or delete events in IE using addEventHandler and removeEventHandler.
Solution: Just practice more and remember it. attachEvent and detachEvent.
③ Forgot to add "on" to the parameters of the IE event handler attachEvent and detachEvent; it is written as attachEvent(type, handler). In fact, the correct one should be attachEvent("on"+type,handler), and I also forgot that there is a judgment branch for DOM0 level event processing.
Causes result: Similarly, IE event processing is not compatible. Adding or deleting events using encapsulated methods on IE cannot succeed.
Solution: Only remember. Another thing to note: element["on"+type] is used in DOM0 level events. For example, element["on"+"click"] is equivalent to element.onclick.
④ The last attribute is also added with a comma at the end, such as the default behavior of preventDefault when blocking the event: add a comma after completion, such as the following code snippet (comment)
preventDefault:function (event) {if (event.preventDefault) {event.preventDefault();}else{event.returnValue=false;}},//The last property preventDefault is added with a comma after completing, an error will occur}Causes the result: an error was reported when running in IE (where line 54 of event.js is the next line of the last comma, which is actually caused by a comma; line 10 of test.html is called because the eventUtil.addEventHandler method in event.js is called)
Solution: No doubt, just remove the last comma.
⑤ It's still a spelling error. The property cancelBubble in IE that prevents events from bubbled up has been written with one more s, which is written as cancelBubbles.
Result: No error was reported, but the events in IE cannot be prevented from bubbled.
Solution: Change it back
The above is the low-level error problem that JavaScript encapsulates the DOM event handler into event.js introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!