這篇文章主要為大家詳細匯總了常用原生JS兼容性寫法，感興趣的小伙伴們可以參考一下
就來總結一下簡單的東西
備注：一下的方法都是包裹在一個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 ?
-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);
}
}
封裝一下，然后就可以直接用了。
以上就是本文的全部內容，希望對大家的學習有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
