事件是用來描述網頁中某一特定有趣時刻的,眾所周知事件通常是在由使用者和瀏覽器進行互動時觸發,其實不然,透過Javascript可以在任何時間觸發特定的事件,並且這些事件與瀏覽器建立的事件是相同的。這意味著會有適當的事件冒泡,並且瀏覽器會執行指派的事件處理程序。這種能力在測試web應用程式的時候,是非常有用的,在DOM 3級規範中提供了方法來模擬特定的事件,IE9 chrome FF Opera 和Safari都支持這樣的方式,在IE8及以前的辦法的IE瀏覽器有他自己的方式來模擬事件。
Javascript事件模擬
#a)Dom 事件模擬
可以透過document上的createEvent()方法,在任何時候創建事件對象,此方法只接受一個參數,既要創建事件對象的事件字符串,在DOM2 級規範上所有的字符串都是複數形式,在DOM 3級事件上所有的字串都採用單數形式,所有的字串如下:
UIEvents:通用的UI 事件,滑鼠事件鍵盤事件都是繼承自UI事件,在DOM 3 層級上使用的是UIEvent。
MouseEvents:通用的滑鼠事件,在DOM 3 級上使用的是 MouseEvent。
MutationEvents:通用的突變事件,在DOM 3 等級使用的是 MutationEvent。
HTMLEvents:通用的HTML事件,在DOM3級上還沒有等效的。
注意,ie9是唯一支援DOM3級鍵盤事件的瀏覽器,但其他瀏覽器也提供了其他可用的方法來模擬鍵盤事件。
一旦創建了一個事件對象,就要初始化這個事件的相關信息,每一種類型的事件都有特定的方法來初始化,在創建完事件對象之後,通過dispatchEvent()方法將事件應用到特定的dom節點上,以便其支援該事件。這個dispatchEvent()事件,支援一個參數,就是你所建立的event物件。
相關推薦:《JavaScript基礎教學》
b)滑鼠事件模擬
滑鼠事件可以透過建立滑鼠事件物件來模擬(mouse event object),並且授予他一些相關信息,創建一個滑鼠事件通過傳給createEvent()方法一個字符串“MouseEvents”,來創建滑鼠事件對象,之後通過iniMouseEvent()方法初始化返回的事件對象,iniMouseEvent( )方法接受15參數,參數如下:
type string類型:要觸發的事件類型,例如'click'。
bubbles Boolean類型:表示事件是否應該冒泡,針對滑鼠事件模擬,該值應該被設為true。
cancelable bool類型:表示該事件是否能夠被取消,針對滑鼠事件模擬,該值應該被設為true。
view 抽象視圖:事件授予的視圖,這個值幾乎全是document.defaultView.
detail int類型:附加的事件資訊這個初始化時一般應該預設為0。
screenX int類型: 事件距離螢幕左邊的X座標
screenY int類型: 事件距離螢幕上邊的y座標
clientX int類型: 事件距離視覺區域左邊的X座標
clientYint類型: : 事件距離可視區域上邊的y座標
ctrlKey Boolean類型: 代表ctrol鍵是否被按下,預設為false。
altKey Boolean類型 : 代表alt鍵是否被按下,預設為false。
shiftKey Boolean類型 : 代表shif鍵是否被按下,預設為false。
metaKey Boolean類型: 代表meta key 是否被按下,預設是false。
button int類型: 表示被按下的滑鼠鍵,預設是零.
relatedTarget (object) : 事件的關聯物件.只有在模擬mouseover 和 mouseout時使用。
值得注意的是,initMouseEvent()的參數直接與event物件相映射,其中前四個參數是由瀏覽器用到,只有事件處理函數用到其他的參數,當事件物件作為參數傳給dispatch()方式,target屬性將會自動被賦上值。下面是一個例子,
var btn = document.getElementById(“myBtn”); var event = document.createEvent(“MouseEvents”); event.initMouseEvent(“click”, true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null); btn.dispatchEvent(event);
在DOM實作的瀏覽器中,所有其他的事件都包含dbclick,都可以透過相同的方式來實現。
c)鍵盤事件模擬
值得注意的是鍵盤事件已經從DOM2級事件中移出了,起初在DOM2級事件的草案版中,鍵盤事件是作為草案的一部分的,但在最終版被移出了,FF已經實現了草案版中的鍵盤事件,值得注意的是在DOM3級事件中實現的鍵盤事件與DOM2級事件草案版中的鍵盤事件還是存在很大差異的。
在dom3級事件中建立一個鍵盤事件物件是透過createEvent()方法,並傳入KeyBoardEvent字串作為參數,對傳回的event對象,呼叫initKeyBoadEvent()方法初始化,初始化鍵盤事件的參數有以下幾個:
type (string) - 要觸發的事件類型,例如「keydown」.
bubbles (Boolean) — 代表事件是否應該冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的視圖. 通常值為:document.defaultView.
key (string) — 按下鍵按下的鍵對應的code.
location (integer) — 按下鍵按下的鍵對應的code.
location (integer) — 按下鍵按下的鍵對應的code.
location (integer) — 按下鍵按下的鍵對應的code.
location (integer) — 按下鍵按下所在的位置. 0 :預設鍵盤, 1 左側位置, 2 右側位置, 3 數字鍵盤區, 4 虛擬鍵盤區, or 5 遊戲手把.
modifiers (string) — 一個有空格分開的修飾符列表.
請注意的是,在DOM3事件中,費掉了keypress事件,因此按照下面的方式,你只能模擬鍵盤上的keydown 和keyup事件。
var textbox = document.getElementById(“myTextbox”),event; if (document.implementation.hasFeature(“KeyboardEvents”, “3.0”)){ event = document.createEvent(“KeyboardEvent”); event.initKeyboardEvent(“keydown”, true, true, document.defaultView, “a”,0, “Shift”, 0); } textbox.dispatchEvent(event);
var event = document.createEvent('MutationEvents'); event.initMutationEvent(“DOMNodeInserted”, true, false, someNode, “”,””,””,0); target.dispatchEvent(event);對於HTML事件,直接上程式碼。
var event = document.createEvent(“HTMLEvents”); event.initEvent(“focus”, true, false); target.dispatchEvent(event);
var btn = document.getElementById(“myBtn”); var event = document.createEventObject(); event.screenX = 100; event.screenY = 0; event.clientX = 0; event.clientY = 0; event.ctrlKey = false; event.altKey = false; event.shiftKey = false; event.button = 0; btn.fireEvent(“onclick”, event);
这个例子创建了一个事件对象,之后通过一些信息初始化该事件对象,注意事件属性的赋值是无序的,对于事件对象来说这些属性值不是很重要,因为只有事件句柄对应的处理函数(event handler)会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的,因为一个通用的事件对象,可以被任何类型的事件触发。
值得注意的是,在Dom的键盘事件模拟中,对于一个keypress模拟事件的结果不会作为字符出现在textbox中,即使对应的事件处理函数已经触发。
与DOM事件模拟相比,个人觉得IE的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。
以上是淺談Javascript事件模擬的詳細內容。更多資訊請關注PHP中文網其他相關文章!