這篇文章主要為大家詳細(xì)匯總了常用原生JS兼容性寫法，感興趣的小伙伴們可以參考一下

就來(lái)總結(jié)一下簡(jiǎn)單的東西

備注：一下的方法都是包裹在一個(gè)EventUtil對(duì)象里面的，直接采用對(duì)象字面量定義方法了。。。

①添加事件方法

addHandler：function(element,type,handler){

 if(element.addEventListener){//檢測(cè)是否為DOM2級(jí)方法

  element.addEventListener(type, handler, false);

 }else if (element.attachEvent){//檢測(cè)是否為IE級(jí)方法

  element.attachEvent("on" + type, handler);

 } else {//檢測(cè)是否為DOM0級(jí)方法

  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;

  }

 }

③獲取事件及事件對(duì)象目標(biāo)

//獲取事件對(duì)象的兼容性寫法

 getEvent: function(event){

  return event ? event : window.event;

 },

 //獲取事件對(duì)象目標(biāo)的兼容性寫法

 getTarget: function(event){

  return event.target || event.srcElement;

 }

④阻止瀏覽器默認(rèn)事件的兼容性寫法

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 事件才包含的獲取相關(guān)元素的方法

//mouseover和mouseout 事件才包含的獲取相關(guān)元素的方法

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;

 }

}

⑦鼠標(biāo)滾輪判斷

對(duì)于mousedown 和mouseup 事件來(lái)說(shuō)，則在其event 對(duì)象存在一個(gè)button 屬性，

表示按下或釋放的按鈕。DOM的button 屬性可能有如下3 個(gè)值：0 表示主鼠標(biāo)按鈕，1 表示中間的鼠

標(biāo)按鈕（鼠標(biāo)滾輪按鈕），2 表示次鼠標(biāo)按鈕。在常規(guī)的設(shè)置中，主鼠標(biāo)按鈕就是鼠標(biāo)左鍵，而次鼠標(biāo)

按鈕就是鼠標(biāo)右鍵。

IE8 及之前版本也提供了button 屬性，但這個(gè)屬性的值與DOM 的button 屬性有很大差異。

0：表示沒(méi)有按下按鈕。

1：表示按下了主鼠標(biāo)按鈕。

2：表示按下了次鼠標(biāo)按鈕。

3：表示同時(shí)按下了主、次鼠標(biāo)按鈕。

4：表示按下了中間的鼠標(biāo)按鈕。

5：表示同時(shí)按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。

6：表示同時(shí)按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。

7：表示同時(shí)按下了三個(gè)鼠標(biāo)按鈕。

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;

  }

 }

}

⑧能夠取得鼠標(biāo)滾輪增量值（delta）的方法

getWheelDelta: function(event){

 if (event.wheelDelta){

  return (client.engine.opera && client.engine.opera < 9.5 ?

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

 }

}

⑩訪問(wèn)剪貼板中的數(shù)據(jù)

getClipboardText: function(event){

  var clipboardData = (event.clipboardData || window.clipboardData);

  return clipboardData.getData("text");

 }

11.設(shè)置剪貼板中的數(shù)據(jù)

setClipboardText: function(event, value){

  if (event.clipboardData){

   return event.clipboardData.setData("text/plain", value);

  } else if (window.clipboardData){

   return window.clipboardData.setData("text", value);

  }

 }

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。