常用原生JS相容性寫法彙總_javascript技巧

就來總結簡單的東西

備註：一下的方法都是包裹在一個EventUtil物件裡面的，直接採用物件字面量定義方法了。 。 。

①新增事件方法

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

②移除先前新增的事件方法

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

③取得事件及事件物件目標

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

④阻止瀏覽器預設事件的相容性寫法

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

⑤阻止事件冒泡的相容性寫法

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

⑥mouseover和mouseout 事件才包含的取得相關元素的方法

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

⑦滑鼠滾輪判斷

對於mousedown 和mouseup 事件來說，則在其event 物件存在一個button 屬性，
表示按下或釋放的按鈕。 DOM的button 屬性可能有以下3 個值：0 表示主滑鼠按鈕，1 表示中間的鼠
標按鈕（滑鼠滾輪按鈕），2 表示次滑鼠按鈕。在常規的設定中，主滑鼠按鈕就是滑鼠左鍵，而次滑鼠
按鈕就是滑鼠右鍵。
IE8 及之前版本也提供了button 屬性，但這個屬性的值與DOM 的button 屬性有很大差異。
 0：表示沒有按下按鈕。
 1：表示按下了主滑鼠按鈕。
 2：表示按了次滑鼠按鈕。
 3：表示同時按下了主、次滑鼠按鈕。
 4：表示按了中間的滑鼠按鈕。
 5：表示同時按下了主滑鼠按鈕和中間的滑鼠按鈕。
 6：表示同時按下了次滑鼠按鈕和中間的滑鼠按鈕。
 7：表示同時按了三個滑鼠按鈕。

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

⑧能夠取得滑鼠滾輪增量值（delta）的方法

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

⑨跨瀏覽器的方式取得字元編碼

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

⑩存取剪貼簿中的資料

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

11.設定剪貼簿中的資料

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

封裝一下，然後就可以直接用了。

完整檔案及更多CSS、LESS基礎重置樣式請見：https://github.com/LuckyWinty/resetFile

以上就是本文的全部內容，希望對大家的學習有所幫助。