Summary of commonly used native JS compatibility writing methods_javascript skills

Let’s summarize some simple things

Remarks: The following methods are all wrapped in an EventUtil object, and the method is directly defined using object literals. . .

①Add event method

addHandler：function(element,type,handler){
 if(element.addEventListener){//检测是否为DOM2级方法
  element.addEventListener(type, handler, false);
 }else if (element.attachEvent){//检测是否为IE级方法
  element.attachEvent("on" + type, handler);
 } else {//检测是否为DOM0级方法
  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;
  }
 }

③Get events and event object targets

//获取事件对象的兼容性写法
 getEvent: function(event){
  return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
  return event.target || event.srcElement;
 }

④How to prevent compatibility of browser default events

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

⑤ Compatibility writing method to prevent event bubbling

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

⑥The mouseover and mouseout events only include methods to obtain related elements

//mouseover和mouseout 事件才包含的获取相关元素的方法
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;
 }
}

⑦Mouse wheel judgment

For mousedown and mouseup events, there is a button attribute in the event object,
Represents a button that is pressed or released. The DOM button attribute may have the following three values: 0 represents the main mouse button, 1 represents the middle mouse
button (mouse wheel button), 2 represents the secondary mouse button. In a regular setup, the primary mouse button is the left mouse button, and the secondary mouse button is
The button is the right mouse button.
IE8 and previous versions also provide the button attribute, but the value of this attribute is very different from the button attribute of the DOM.
 0: Indicates that the button is not pressed.
 1: Indicates the primary mouse button is pressed.
 2: Indicates that the mouse button has been pressed.
 3: Indicates that the primary and secondary mouse buttons are pressed at the same time.
 4: Indicates that the middle mouse button is pressed.
 5: Indicates that the main mouse button and the middle mouse button are pressed at the same time.
 6: Indicates that the second mouse button and the middle mouse button are pressed at the same time.
 7: Indicates three mouse buttons were pressed simultaneously.

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

⑧How to obtain the incremental value (delta) of the mouse wheel

getWheelDelta: function(event){
 if (event.wheelDelta){
  return (client.engine.opera && client.engine.opera < 9.5 &#63;
   -event.wheelDelta : event.wheelDelta);
 } else {
  return -event.detail * 40;//firefox中的值为+3表示向上滚，-3表示向下滚
 }
}

⑨Get character encoding in a cross-browser way

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

⑩ Access data in the clipboard

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

11. Set the 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 use it directly.

For complete files and more basic CSS and LESS reset styles, see: https://github.com/LuckyWinty/resetFile

The above is the entire content of this article, I hope it will be helpful to everyone’s study.