常用原生JS方法總結(相容性寫法)

2022-01-19 03:23:56 字數 2053 閱讀 6028

經常會用到原生js來寫前端。。。但是原生js的一些方法在適應各個瀏覽器的時候寫法有的也不怎麼一樣的。。。

今天下班有點累。。。

就來總結一下簡單的東西吧……

備註:一下的方法都是包裹在乙個eventutil物件裡面的,直接採用物件字面量定義方法了。。。

①新增事件方法

addhandler:function(element,type,handler)else if (element.attachevent) else 

}

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

removehandler:function(element, type, handler) else if (element.detachevent) else 

}

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

//獲取事件物件的相容性寫法

getevent: function(event),

//獲取事件物件目標的相容性寫法

gettarget: function(event)

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

preventdefault: function(event) else 

}

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

stoppropagation: function(event) else 

}

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

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

getrelatedtarget: function(event) else if (event.toelement) else if (event.fromelement) else

}

⑦滑鼠滾輪判斷

/*對於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) else

}}

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

getwheeldelta: function(event) else 

}

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

getcharcode: function(event) else 

}

⑩訪問剪貼簿中的資料

getclipboardtext: function(event)

11.設定剪貼簿中的資料

setclipboardtext: function(event, value) else if (window.clipboarddata)

}

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

常用原生JS方法總結(相容性寫法)

新增事件方法 1 2 3 4 5 6 7 8 9 addhandler function element,type,handler elseif element.attachevent else 移除之前新增的事件方法 1 2 3 4 5 6 7 8 9 removehandler function...

原生JS方法個人總結(相容性寫法)

獲取非行內樣式的相容 注釋 1.style 獲取行間樣式。2.currentstyle 獲取計算後的樣式,也叫當前樣式 最終樣式。3.getcomputedstyle obj,false 在ff新版本中只需要第乙個引數,即操作物件,第二個引數寫 false 也是大家通用的寫法,目的是為了相容老版本的...

常用彈性布局及其相容性寫法

開啟彈性布局 display webkit box display moz box display ms flexbox display webkit flex display flex 定義子元素排列 webkit box orient horizontal webkit box directio...