Common native JS compatibility writing summary_javascript skills

This article provides a detailed summary of common native JS compatibility writing methods. If you are interested, you can refer to it to summarize simple things.

Note: All the methods are enclosed in an EventUtil object, and the object literal definition method is used directly...

① Add an event Method

AddHandler: function (element, type, handler) {if (element. addEventListener) {// checks whether it is a DOM2-level method element. addEventListener (type, handler, false);} else if (element. attachEvent) {// check whether it is an IE-level method element. attachEvent ("on" + type, handler);} else {// check whether the method is DOM0-level element ["on" + type] = handler ;}}

② Remove the previously added event Method

removeHandler：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;  } }

③ Obtain the event and event object target

// Get the compatibility of event objects. getEvent: function (event) {return event? Event: window. event;}, // get the compatibility method of the event object target getTarget: function (event) {return event.tar get | event. srcElement ;}

④ Prevent the compatibility of browser default events

preventDefault: function(event){  if (event.preventDefault){   event.preventDefault();  } else {   event.returnValue = false;  } }

⑤ Compatibility writing to prevent event bubbles

stopPropagation: function(event){  if (event.stopPropagation){   event.stopPropagation();  } else {   event.cancelBubble = true;  } }

6. Methods for obtaining related elements contained in mouseover and mouseout events

// GetRelatedTarget: function (event) {if (event. relatedTarget) {return event. relatedTarget;} else if (event. toElement) {return event. toElement;} else if (event. fromElement) {return event. fromElement;} else {return null ;}}

7. scroll wheel judgment

For mousedown and mouseup events, a button attribute exists in the event object,
Indicates the button that is pressed or released. The button attribute of DOM may have the following three values: 0 indicates the master mouse button, and 1 indicates the middle mouse.
Button (scroll wheel button), 2 indicates the mouse button. In general settings, the primary mouse button is the left mouse button, and the secondary mouse
The button is the right mouse button.
IE8 and earlier versions also provide the button attribute, but the value of this attribute is very different from that of the DOM button attribute.
Success 0: the button is not pressed.
Cursor 1: indicates that the master mouse button is pressed.
Tip 2: The mouse button is pressed.
Cursor 3: The master and secondary mouse buttons are simultaneously pressed.
Tip 4: The middle mouse button is pressed.
Tip 5: both the master and middle mouse buttons are pressed.
Tip 6: both the mouse button and the middle mouse button are pressed.
Tip 7: three mouse buttons are simultaneously pressed.

getButton: function(event){ if (document.implementation.hasFeature("MouseEvents", "2.0")){  return event.button; } else {  switch(event.button){   case 0:   case 1:   case 3:   case 5:   case 7:   return 0;   case 2:   case 6:   return 2;   case 4:   return 1;  } }}

⑧ Method for obtaining the delta Value

GetWheelDelta: function (event) {if (event. wheelDelta) {return (client. engine. opera & client. engine. opera <9.5? -Event. wheelDelta: event. wheelDelta);} else {return-event. detail * 40; // The value in firefox is + 3, which indicates rolling up, and-3 indicates rolling down }}

⑨ Cross-browser character encoding

getCharCode: function(event){ if (typeof event.charCode == "number"){  return event.charCode; } else {  return event.keyCode; }}

Clipboard access data

getClipboardText: function(event){  var clipboardData = (event.clipboardData || window.clipboardData);  return clipboardData.getData("text"); }

11. Set Data in the clipboard

setClipboardText: function(event, value){  if (event.clipboardData){   return event.clipboardData.setData("text/plain", value);  } else if (window.clipboardData){   return window.clipboardData.setData("text", value);  } }

Encapsulate it, and then you can use it directly.

Complete file and more CSS, LESS basic reset style see: https://github.com/LuckyWinty/resetFile

The above is all the content of this article, hoping to help you learn.