首頁 > web前端 > js教程 > 淺談Javascript事件模擬_javascript技巧

淺談Javascript事件模擬_javascript技巧

WBOY
發布: 2016-05-16 17:52:06
原創
933 人瀏覽過

這意味著會有適當的事件冒泡,並且瀏覽器會執行指派的事件處理程序。這種能力在測試web應用程式的時候,是非常有用的,在DOM 3級規範中提供了方法來模擬特定的事件,IE9 chrome FF Opera 和Safari都支持這樣的方式,在IE8及以前的辦法的IE瀏覽器有他自己的方式來模擬事件
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物件。
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類型:事件距離可視區域的y座標
  clientX int類型:事件距離可視區域的 334345]pclip; : 事件距離視覺區域上邊的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"fg "myBtn");
  var event = document.createEvent("MouseEvents");
  event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,000, , 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.
  lo (string) — 按下的鍵對應的code.
  lo (inting) — 按下鍵所在的位置. 0 :預設鍵盤, 1 左側位置, 2 右側位置, 3 數字鍵盤區, 4 虛擬鍵盤區, or 5 遊戲手把.
  modifiers (string) — 一個有空格分開的修飾符列表.
  repeat (integer) — 一行中某個鍵被按下的次數.
請注意的是,在DOM3事件中,費掉了keypress事件,因此按照下面的方式,你只能模擬鍵盤上的keydown 和keyup事件。 程式碼如下:


  var text = documentbox) event;
    if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
      Event("keydown", true, true, document.defaultView, "a",0, "Shift", 0);
    }
    textbox.dispatchEvent(event);
在FF下,允許你透過使用document.createEvent('KeyEvents'),這種方式來建立鍵盤事件,初始化的方法為initKeyEvent(),這個方法接受10個參數,
  type (string) — 要觸發的事件類型,例如"keydown".
  bubbles (Boolean) — 代表事件是否應該冒泡.
  cancelable (Boolean) — 代表事件是否可以被取消.
  view (Abstract) —被授予事件的是圖. 通常值為:document.defaultView.
  ctrlKey (Boolean) — 代表ctrol鍵是否按下. 預設false.
  altKey (Boolean) — 代表預設alt鍵是否按下. 🎜>  altKey (Boolean) — 代表預設alt鍵是否按下. 🎜> 是否按. .
  shiftKey (Boolean) — 代表shift鍵是否按下. 預設false.
  metaKey (Boolean) — 代表meta鍵是否按下. 預設false.
 鍵 keyCode (int) —時鍵所對應的鍵碼.預設為0;
  charCode (integer) — 按下的鍵的字元所對應的ASCII code.是共keypress事件使用的預設是0.
D)模擬其他事件
滑鼠事件和鍵盤事件是在瀏覽器中最長被模擬的事件,但某些時候同樣需要模擬突變事件和HTML事件。可以用createEvent('MutationEvents'),來創建一個突變事件對象,可以採用initMutationEvent()來初始化這個事件對象,參數包括type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.可以採用以下面的方式模擬一個突變事件:
  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);是很少在瀏覽器中用到,因為他們收應用程式的限制。
E)定制DOM事件
在DOM3級事件中定義了一類事件稱之為custom event,我稱之為客戶事件,客戶事件不會原生的被dom觸發,而是直接提供,以至於開發者可以創建自己的事件,你可以創建一個自己的客戶事件,透過調用createEvent('CustomEvent'),對返回的事件物件調用,initCustomEvent()方法,其中傳遞四個參數type,bubbles,cancelable ,detail。 ps:小弟對這部分理解有限,在這裡只是拋磚引玉。
F)IE中的事件模擬
從IE8,以及更早版本的IE,都在模仿DOM模擬事件的方式:創建事件對象,初始化事件訊息,之後觸發事件。當然IE在完成這幾個步驟的過程是不同的。
首先不同於dom中創建event對象的方法,IE採用document.createEventObject()方法,並且沒有參數,返回一個通用的事件對象,接下來要對返回的event對象賦值,此時ie並沒有提供初始化函數,你只能採用物理方法一個一個的賦值,最後在目標元素上呼叫fireEvent()方法,參數為兩個:事件處理的名稱和建立的事件物件。當fireEvent方法被呼叫的時候,event物件的srcElement和type屬性將會被自動賦值,其他將需要手動賦值。請看下面的範例:

複製程式碼 程式碼如下:
  var event = document.createEventObject();
  event.screenX = 100;
  event.screenY = 0;   event.ctrlKey = false;
  event.altKey = false;
  event.shiftKey = false;
  , event);


  這個例子創建了一個事件對象,之後透過一些資訊初始化該事件對象,注意事件屬性的賦值是無序的,對於事件對象來說這些屬性值不是很重要,因為只有事件句柄對應的處理函數(event handler)會用到他們。對於建立滑鼠事件、鍵盤事件或其他事件的事件對象之間是沒有區別的,因為一個通用的事件對象,可以被任何類型的事件觸發。
  值得注意的是,在Dom的鍵盤事件模擬中,對於一個keypress模擬事件的結果不會作為字元出現在textbox中,即使對應的事件處理函數已經觸發。
  與DOM事件模擬相比,個人覺得IE的事件模擬更容易讓人記憶和接受,統一的事件模型可以帶來一些便捷。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板