JavaScript中的模擬事件和自定義事件實(shí)例分析

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

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

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

1、DOM中的事件模擬

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

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

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

① UIEvents：一般化的UI事件，鼠標(biāo)事件和鍵盤事件都繼承自UI事件，DOM3級(jí)中是UIEvent；

② MouseEvents：一般化的鼠標(biāo)事件，DOM3級(jí)中是MouseEvent；

③ MutationEvents：一般化的DOM變動(dòng)事件，DOM3級(jí)中是MutationEvent；

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

步驟2：初始化事件對(duì)象

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

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

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

2) 模擬鼠標(biāo)事件：

使用createEvent()方法創(chuàng)建event對(duì)象，傳入字符串"MouseEvents"，返回的對(duì)象有一個(gè)名為initMouseEvent()方法，用于指定與該鼠標(biāo)事件有關(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對(duì)象，傳入字符串"KeyboardEvent"，返回的對(duì)象有一個(gè)名為initKeyboardEvent()方法。

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

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

模擬按住Shift的同時(shí)又按下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) 模擬其他事件：

① 模擬變動(dòng)事件：

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

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

② 模擬HTML事件：

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

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

5) 自定義DOM事件：

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

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

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

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

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

detail（對(duì)象）：任意值，保存在event對(duì)象的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會(huì)輸出：

div：Hello world
document：Hello world

單擊document會(huì)輸出：

document：Hello world

2、IE中的事件模擬

IE中的事件模擬有以下3個(gè)步驟：

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

② 為event對(duì)象手動(dòng)添加所有必要的信息，沒有方法來輔助添加。

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

在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錯(cuò)誤與調(diào)試技巧總結(jié)》

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