Summary of commonly used native JS compatibility writing methods

Summary of commonly used native JS compatibility writing methods_javascript skills

WBOY

Release： 2016-05-16 15:03:33

Original

1933 people have browsed it

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

Copy after login

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

Copy after login

③Get events and event object targets

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

Copy after login

④How to prevent compatibility of browser default events

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

Copy after login

⑤ Compatibility writing method to prevent event bubbling

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

Copy after login

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

Copy after login

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

Copy after login

⑧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表示向下滚
 }
}

Copy after login

⑨Get character encoding in a cross-browser way

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

Copy after login

⑩ Access data in the clipboard

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

Copy after login

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

Copy after login

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.