常用原生JS方法總結（兼容性寫法）
阿新 • • 發佈：2019-03-24
ext tail false document 是否 lai type 方式 事件
經常會用到原生JS來寫前端。。。但是原生JS的一些方法在適應各個瀏覽器的時候寫法有的也不怎麽一樣的。。。
備註：一下的方法都是包裹在一個EventUtil對象裏面的，直接采用對象字面量定義方法了。。。
①添加事件方法
| 1 2 3 4 5 6 7 8 9 |
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;
}
}
|
②移除之前添加的事件方法
| 1 2 3 4 5 6 7 8 9 |
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;
}
}
|
③獲取事件及事件對象目標
| 1 2 3 4 5 6 7 8 |
//獲取事件對象的兼容性寫法
getEvent: function(event){
return event ? event : window.event;
},
//獲取事件對象目標的兼容性寫法
getTarget: function(event){
return event.target || event.srcElement;
}
|
④阻止瀏覽器默認事件的兼容性寫法
| 1 2 3 4 5 6 7 |
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
|
⑤阻止事件冒泡的兼容性寫法
| 1 2 3 4 5 6 7 |
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
|
⑥mouseover和mouseout 事件才包含的獲取相關元素的方法
| 1 2 3 4 5 6 7 8 9 10 11 12 |
//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;
}
}
|
⑦鼠標滾輪判斷
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*對於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）的方法
| 1 2 3 4 5 6 7 8 |
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表示向下滾
}
}
|
⑨跨瀏覽器的方式取得字符編碼
| 1 2 3 4 5 6 7 |
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
}
|
⑩訪問剪貼板中的數據
| 1 2 3 4 |
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
|
11.設置剪貼板中的數據
| 1 2 3 4 5 6 7 |
setClipboardText: function(event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}
|
常用原生JS方法總結（兼容性寫法）