這篇文章主要介紹了Javascript事件模擬的示例分析，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是工信部頒發(fā)資質(zhì)IDC服務器商，為用戶提供優(yōu)質(zhì)的雅安服務器托管服務

事件是用來描述網(wǎng)頁中某一特定有趣時刻的，眾所周知事件通常是在由用戶和瀏覽器進行交互時觸發(fā)，其實不然，通過Javascript可以在任何時間觸發(fā)特定的事件，并且這些事件與瀏覽器創(chuàng)建的事件是相同的。這就意味著會有適當?shù)氖录芭?，并且瀏覽器會執(zhí)行分配的事件處理程序。這種能力在測試web應用程序的時候，是非常有用的，在DOM 3級規(guī)范中提供了方法來模擬特定的事件，IE9 chrome FF Opera 和 Safari都支持這樣的方式，在IE8及以前的辦法的IE瀏覽器有他自己的方式來模擬事件。

Javascript事件模擬

a)Dom 事件模擬
可以通過document上的createEvent()方法，在任何時候創(chuàng)建事件對象，此方法只接受一個參數(shù)，既要創(chuàng)建事件對象的事件字符串，在DOM2 級規(guī)范上所有的字符串都是復數(shù)形式，在DOM 3級事件上所有的字符串都采用單數(shù)形式，所有的字符串如下：
UIEvents：通用的UI 事件，鼠標事件鍵盤事件都是繼承自UI事件，在DOM 3 級上使用的是 UIEvent。
MouseEvents：通用的鼠標事件，在DOM 3 級上使用的是 MouseEvent。
MutationEvents：通用的突變事件，在DOM 3 級上使用的是 MutationEvent。
HTMLEvents：通用的HTML事件，在DOM3級上還沒有等效的。
注意，ie9是唯一支持DOM3級鍵盤事件的瀏覽器，但其他瀏覽器也提供了其他可用的方法來模擬鍵盤事件。
一旦創(chuàng)建了一個事件對象，就要初始化這個事件的相關信息，每一種類型的事件都有特定的方法來初始化，在創(chuàng)建完事件對象之后，通過dispatchEvent()方法來將事件應用到特定的dom節(jié)點上，以便其支持該事件。這個dispatchEvent()事件，支持一個參數(shù)，就是你創(chuàng)建的event對象。

相關推薦：《JavaScript基礎教程》
b)鼠標事件模擬
鼠標事件可以通過創(chuàng)建一個鼠標事件對象來模擬（mouse event object），并且授予他一些相關信息，創(chuàng)建一個鼠標事件通過傳給createEvent（）方法一個字符串“MouseEvents”，來創(chuàng)建鼠標事件對象，之后通過iniMouseEvent()方法來初始化返回的事件對象，iniMouseEvent()方法接受15參數(shù)，參數(shù)如下：
type string類型 ：要觸發(fā)的事件類型，例如‘click’。
bubbles Boolean類型：表示事件是否應該冒泡，針對鼠標事件模擬，該值應該被設置為true。
cancelable bool類型：表示該事件是否能夠被取消，針對鼠標事件模擬，該值應該被設置為true。
view 抽象視圖：事件授予的視圖，這個值幾乎全是document.defaultView.
detail int類型：附加的事件信息這個初始化時一般應該默認為0。
screenX int類型 ： 事件距離屏幕左邊的X坐標
screenY int類型 ： 事件距離屏幕上邊的y坐標
clientX int類型 ： 事件距離可視區(qū)域左邊的X坐標
clientY int類型 ： 事件距離可視區(qū)域上邊的y坐標
ctrlKey Boolean類型 ： 代表ctrol鍵是否被按下，默認為false。
altKey Boolean類型 ： 代表alt鍵是否被按下，默認為false。
shiftKey Boolean類型 ： 代表shif鍵是否被按下，默認為false。
metaKey Boolean類型： 代表meta key 是否被按下，默認是false。
button int類型： 表示被按下的鼠標鍵，默認是零.
relatedTarget (object) ： 事件的關聯(lián)對象.只有在模擬mouseover 和 mouseout時用到。

值得注意的是，initMouseEvent()的參數(shù)直接與event對象相映射，其中前四個參數(shù)是由瀏覽器用到，只有事件處理函數(shù)用到其他的參數(shù)，當事件對象作為參數(shù)傳給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實現(xiàn)的瀏覽器中，所有其他的事件都包括dbclick，都可以通過相同的方式來實現(xiàn)。
c）鍵盤事件模擬
值得注意的是鍵盤事件已經(jīng)從DOM2級事件中移出了，起初在DOM2級事件的草案版中，鍵盤事件是作為草案的一部分的，但在最終版被移出了，F(xiàn)F已經(jīng)實現(xiàn)了草案版中的鍵盤事件，值得注意的是在DOM3級事件中實現(xiàn)的鍵盤事件與DOM2級事件草案版中的鍵盤事件還是存在很大差異的。
在dom3級事件中創(chuàng)建一個鍵盤事件對象是通過createEvent()方法，并傳入KeyBoardEvent字符串作為參數(shù)，對返回的event對象，調(diào)用initKeyBoadEvent()方法初始化，初始化鍵盤事件的參數(shù)有以下幾個：
type (string) - 要觸發(fā)的事件類型,例如“keydown”.
bubbles (Boolean) — 代表事件是否應該冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的視圖. 通常值為：document.defaultView.
key (string) — 按下的鍵對應的code.
location (integer) — 按下鍵所在的位置. 0 ：默認鍵盤, 1 左側位置, 2 右側位置, 3 數(shù)字鍵盤區(qū), 4 虛擬鍵盤區(qū), or 5 游戲手柄.
modifiers (string) — 一個有空格分開的修飾符列表.
repeat (integer) — 一行中某個鍵被按下的次數(shù).
請注意的是，在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);

在FF下，允許你通過使用document.createEvent('KeyEvents'),這種方式來創(chuàng)建鍵盤事件，初始化的方法為initKeyEvent()，這個方法接受10個參數(shù)，
type (string) — 要觸發(fā)的事件類型,例如“keydown”.
bubbles (Boolean) — 代表事件是否應該冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的是圖. 通常值為：document.defaultView.
ctrlKey (Boolean) — 代表ctrol鍵是否按下. 默認 false.
altKey (Boolean) — 代表alt鍵是否按下. 默認 false.
shiftKey (Boolean) — 代表shift鍵是否按下. 默認 false.
metaKey (Boolean) — 代表meta鍵是否按下. 默認 false.
keyCode (integer) — 鍵按下或釋放時鍵所對應的鍵碼. 默認是0；
charCode (integer) — 按下的鍵的字符所對應的ASCII code.是共keypress事件使用的 默認是0.
D)模擬其他事件
鼠標事件和鍵盤事件是在瀏覽器中最長被模擬的事件，，但是某些時候同樣需要模擬突變事件和HTML事件?？梢杂胏reateEvent('MutationEvents'),來創(chuàng)建一個突變事件對象，可以采用initMutationEvent()來初始化這個事件對象，參數(shù)包括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);

對于突變事件和HTML事件是很少在瀏覽器中用到，因為他們收應用程序的限制。
E)定制DOM事件
在DOM3級事件中定義了一類事件稱之為 custom event，我稱之為客戶事件，客戶事件不會原生的被dom觸發(fā)，而是直接提供，以至于開發(fā)者可以創(chuàng)建他們自己的事件，你可以創(chuàng)建一個自己的客戶事件，通過調(diào)用createEvent('CustomEvent'),對返回的事件對象調(diào)用，initCustomEvent()方法，其中傳遞四個參數(shù)type，bubbles，cancelable，detail。ps:小弟對這部分理解有限，在這里只是拋磚引玉。
F）IE中的事件模擬
從IE8，以及更早版本的IE，都在模仿DOM模擬事件的方式：創(chuàng)建事件對象，初始化事件信息，之后觸發(fā)事件。當然IE在完成這幾個步驟的過程是不同的。
首先不同于dom中創(chuàng)建event對象的方法，IE采用document.createEventObject()方法，并且沒有參數(shù)，返回一個通用的事件對象，接下來要對返回的event對象賦值，此時ie并沒有提供初始化函數(shù)，你只能采用物理方法一個一個的賦值，最后在目標元素上調(diào)用fireEvent()方法，參數(shù)為兩個：事件處理的名稱和創(chuàng)建的事件對象。當fireEvent方法被調(diào)用的時候，event對象的srcElement和type屬性將會被自動賦值，其他將需要手動賦值。請看下面的例子：　

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);

這個例子創(chuàng)建了一個事件對象，之后通過一些信息初始化該事件對象，注意事件屬性的賦值是無序的，對于事件對象來說這些屬性值不是很重要，因為只有事件句柄對應的處理函數(shù)（event handler）會用到他們。對于創(chuàng)建鼠標事件、鍵盤事件還是其他事件的事件對象之間是沒有區(qū)別的，因為一個通用的事件對象，可以被任何類型的事件觸發(fā)。
值得注意的是，在Dom的鍵盤事件模擬中，對于一個keypress模擬事件的結果不會作為字符出現(xiàn)在textbox中，即使對應的事件處理函數(shù)已經(jīng)觸發(fā)。
與DOM事件模擬相比，個人覺得IE的事件模擬更容易讓人記憶和接受，統(tǒng)一的事件模型可以帶來一些便捷。

感謝你能夠認真閱讀完這篇文章，希望小編分享Javascript事件模擬的示例分析內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：Javascript事件模擬的示例分析-創(chuàng)新互聯(lián)
文章位置：http://redsoil1982.com.cn/article16/dpepdg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、域名注冊、網(wǎng)站改版、App設計、網(wǎng)站導航、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)