跨瀏覽器的事件處理

2021-08-28 08:49:03 字數 1337 閱讀 1394

事件型別

ie中的事件物件

dom中的事件物件

獲取方法

window.event

event

兩者都含有一些常規的屬性/方法,在所有的事件中呈現。

dom事件物件的屬性/方法:

ie事件物件的屬性/方法:

除卻以上的屬性,還有些事件擁有著較為特殊的屬性,如:

事件屬性/放放

介紹mousedown

buttons

1-按下左鍵;2-按下右鍵;3-同時按下左右鍵

mousewheel

wheeldelta

120-往前滑動;-120-往後滑動

keydown/keyup

keycode

數字字元鍵時,keycode屬性的值和ascii對應的小寫字母或數字的編碼相同;非數字字元鍵,也有著對應的鍵碼。

keypress

charcode

該事件觸發意味著按下的鍵會影響到螢幕中文字的顯示,鍵碼對應ascii的編碼,區分大小寫。

contextmenu

——滑鼠右鍵事件,可調出上下文選單,該事件是冒泡的,因此可以在window上使用事件委託。另外可在目標元素中利用event.preventdefault()方法阻止上下文選單出現。

要注意,在opera9.5之前的版本,wheeldelta的正負號是顛倒的,另外firefox支援乙個dommousescroll的滾輪事件,當event.detail == -3時表示往前滑動, event.detail == 3時,表示往後滑動。那麼如何做到跨瀏覽器的事件處理呢?

由上文可知,不同瀏覽器的事件物件以及屬性是不一樣的,為了讓**適應各種瀏覽器,不少開發人員會運用框架(jquery等),但是自己編寫也並不難。

var eventutil = ,

gettarget: function (event) ,

getwheeldelta: function(event) else

}, preventdefault: function(event) else }}

//獲取事件流的目標標籤

按鈕 var btn = document.getelementbyid("mybtn");

btn.onclick = function(event)

跨瀏覽器處理事件

dom0的處理事件就簡單說一下 一種直接在標籤裡寫屬性 小寫 nclick fun 另一種則將乙個處理函式賦值給乙個事件處理程式屬性。要移除也就是把該事件處理程式屬性賦值為null 現在切入正題 addeventlistener和removeeventlistener是dom2級事件。引數中唯一值得...

處理跨瀏覽器的事件處理程式

事件 事件是使用者或瀏覽器自身執行的某些動作,例如 click load mouseover 事件處理程式 用於響應某個事件的函式 在不同的瀏覽器,dom中,事件處理程式是響應某個事件的函式 dom0 中事件處理函式 event onclick function 刪除程式 event onclick...

跨瀏覽器的事件處理程式

要保證事件處理的 在大多數瀏覽器下能夠一致的執行,只需關注冒泡階段即可。第乙個要建立的方法是addhandler 它的職責是視情況分別使用 dom0 級方法 dom2 級方法或 ie 方法來新增事件。這個方法屬於乙個叫做 eventutil 的物件,addhandler 接受三個引數 要操作的元素 ...