本文實例講述了JavaScript中的模擬事件和自定義事件。分享給大家供大家參考，具體如下：

前面介紹了JavaScript中為事件指定處理程序的五種方式和JavaScript的事件對象event。

下面介紹JavaScript中的模擬事件和自定義事件。

1、DOM中的事件模擬

1) DOM中的事件模擬有以下3個步驟：

步驟1：創(chuàng)建事件對象event

可以在document對象上使用createEvent()方法創(chuàng)建event對象，此方法接收一個參數(shù)，即要創(chuàng)建的事件類型的字符串。在DOM2級中這些字符串都使用英文復(fù)數(shù)形式，而在DOM3級中都變成了單數(shù)。這個字符串可以是以下幾個字符串之一：

① UIEvents：一般化的UI事件，鼠標事件和鍵盤事件都繼承自UI事件，DOM3級中是UIEvent；

② MouseEvents：一般化的鼠標事件，DOM3級中是MouseEvent；

③ MutationEvents：一般化的DOM變動事件，DOM3級中是MutationEvent；

④ HTMLEvents：一般化的HTML事件，沒有對應(yīng)的DOM3級事件，被分散到 其他類別中。

步驟2：初始化事件對象

使用與事件有關(guān)的信息對其進行初始化，每種類型的event對象都有一個特殊的方法，為它傳入適當?shù)臄?shù)據(jù)就可以初始化該event對象，不同類型的方法的名字也不相同，具體要取決于createEvent()中使用的參數(shù)。

步驟3：觸發(fā)事件

使用dispatch()方法，此方法接收一個參數(shù)，即要觸發(fā)事件的event對象。

2) 模擬鼠標事件：

使用createEvent()方法創(chuàng)建event對象，傳入字符串"MouseEvents"，返回的對象有一個名為initMouseEvent()方法，用于指定與該鼠標事件有關(guān)的信息。

模擬按鈕的單擊事件：

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
btn.dispatchEvent(event);

3) 模擬鍵盤事件：

使用createEvent()方法創(chuàng)建event對象，傳入字符串"KeyboardEvent"，返回的對象有一個名為initKeyboardEvent()方法。

DOM2級事件并沒有專門規(guī)定鍵盤事件，后來的DOM3級事件才正式將其作為一種事件給出規(guī)定。IE9是目前唯一支持DOM3級鍵盤事件的瀏覽器，但其他瀏覽器也可以模擬鍵盤事件。

在使用createEvent()方法之前，需要先檢測瀏覽器是否支持DOM3級事件。

模擬按住Shift的同時又按下A鍵：

var text = document.getElementsByTagNames("input")[0];
if (document.implementation.hasFeature("KeyboardEvents", 3.0) {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
text.dispatchEvent(event);

4) 模擬其他事件：

① 模擬變動事件：

使用createEvent()方法創(chuàng)建event對象，傳入字符串"MutationEvents"，返回的對象有一個名為initMutationEvent()的方法。

var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "", "", "", 0);
target.dispatchEvent(event);

② 模擬HTML事件：

使用createEvent()方法創(chuàng)建event對象，傳入字符串"HTMLEvents"，返回的對象有一個名為initMutationEvent()的方法。

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

5) 自定義DOM事件：

DOM3級還定義了自定義事件。自定義事件不是由DOM原生觸發(fā)的，目的是讓開發(fā)人員創(chuàng)建自己的事件。

創(chuàng)建自定義事件，可以使用createEvent("CustomEvent")方法，返回的對象有一個名為initCustomEvent()的方法，接收如下4個參數(shù)：

type（字符串）：事件類型；

bubbles（布爾值）：時間是否應(yīng)該冒泡；

cancelable（布爾值）：表示事件是否可以取消；

detail（對象）：任意值，保存在event對象的detail屬性中。

var div = document.getElementsByTagNames("div")[0];
EventUtil.addHandler(div, "myEvent", function(event) {
  alert("div：" + event.detail);
});
EventUtil.addHandler(document, "myEvent", function(event) {
  alert("document：" + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", 3.0) {
  var event = document.createEvent("CustomEvent");
  event.initCustomEvent("myEvent", true, false, "Hello world");
}
div.dispatchEvent(event);

單擊div會輸出：

div：Hello world
document：Hello world

單擊document會輸出：

document：Hello world

2、IE中的事件模擬

IE中的事件模擬有以下3個步驟：

① 使用document.createEventObject()方法在IE中創(chuàng)建event對象，與DOM不同的是，此方法不接受參數(shù)，結(jié)果會返回一個通用的event對象。

② 為event對象手動添加所有必要的信息，沒有方法來輔助添加。

③ 在目標上使用fireEvent()方法，此方法接收兩個參數(shù)：事件處理程序的名稱和event對象。在調(diào)用fireEvent()方法時，會自動為event對象添加srcElement和type屬性，其他屬性則必須手動添加。

在IE中，模擬任何事件都采用相同的模式。

模擬click事件：

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEventObject();
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.button = 0;
btn.fireEvent("onclick", event);

模擬keypress事件：

var text = document.getElementsByTagNames("input")[0];
var event = document.createEventObject();
event.strlKey = false;
event.altKey = false;
event.shiftKey = false;
Event.keyCode = 65;
btn.fireEvent("onkeypress", event);

PS：關(guān)于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論