成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 事件——“模擬事件”的注意要點(diǎn)

BakerJ / 3125人閱讀

DOM中的事件模擬

三個(gè)步驟：

首先通過document.createEvent()方法創(chuàng)建event對象，接收一個(gè)參數(shù)，即表示要?jiǎng)?chuàng)建的事件類型的字符串：

UIEvents（DOM3中的UIEvent）鼠標(biāo)和鍵盤事件；

MouseEvents（DOM3中的MouseEvent）鼠標(biāo)事件；

MutationEvents（DOM3中的MutationEvent）變動事件；

HTMLEvents（沒有DOM3中對應(yīng)的事件）HTML事件；

其次在創(chuàng)建了event對象之后，還需要使用與事件有關(guān)的信息對其進(jìn)行初始化。每種類型的event對象都有一個(gè)特殊的方法，為它傳入適當(dāng)?shù)臄?shù)據(jù)就可以初始化該event對象。用event.init......()此類行的方法。

最后就是觸發(fā)事件。這需要使用dispatchEvent()方法，接收一個(gè)參數(shù)，即表示要觸發(fā)的event對象。

模擬鼠標(biāo)事件

首先創(chuàng)建鼠標(biāo)事件對象的方法createEvent()傳入MouseEvents，返回的對象的方法initMouseEvent()，接收15個(gè)信息：

type（字符串）：事件類型如“click”；

bubble（布爾值）：是否冒泡；

cancelable（布爾值）：是否可取消；

view（AbstractView）：與事件關(guān)聯(lián)的視圖，一般為document.defaultView；

detail（整數(shù)）：一般為0，一般只有事件處理程序使用；

screenX（整數(shù)）：事件相對于屏幕的X坐標(biāo)；

screenY（整數(shù)）；

clientX（整數(shù)）：事件相對于視口的X坐標(biāo)；

clientY（整數(shù)）；

ctrlKey（布爾值）：是否按下了Ctrl鍵，默認(rèn)為false；

11. altKey（布爾值）；
12. shiftKey（布爾值）；
13. metaKey（布爾值）；
14. button（整數(shù)）：表示按下了哪個(gè)鼠標(biāo)鍵，默認(rèn)為0；
15. relatedTarget（對象）：表示與事件相關(guān)的對象。一般只有在模擬mouseover與mouseout時(shí)使用。

最后記得把event對象傳給dispatchEvent()方法。

如模擬按鈕的單擊事件：

//模擬click事件
//獲取btn
var btn = document.querySelector("#btn");
//創(chuàng)建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件綁定事件處理程序
btn.onclick = function () {
    console.log("hello");
}
//觸發(fā)事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外，建議使用構(gòu)造函數(shù)"MouseEvent"：

var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
});
模擬鍵盤事件

首先創(chuàng)建鼠標(biāo)事件對象的方法createEvent()傳入KeyboardEvents，返回的對象的方法initKeyEvent()，接收下面參數(shù)：

type（字符串）：要觸發(fā)的事件類型，“keydown”等；

bubbles（布爾值）：表示事件是否應(yīng)該冒泡；

cancelable（布爾值）：是否可以取消；

view（AbstractView）：與事件關(guān)聯(lián)的視圖。一般為document.defaultView；

key（布爾值）：表示按下的鍵的鍵碼；

location（整數(shù)）：表示按下哪里的鍵。0為主鍵盤；1為左；2為右；3為數(shù)字鍵盤；4為虛擬鍵盤；5為手柄；

modifiers（字符串）：空格分隔的修改鍵列表，如“shift”；

repeat（整數(shù)）：在一行中按下了多少次這個(gè)鍵；

由于DOM3級不提倡使用keypress事件，因此只能利用這種技術(shù)來模擬keydown和keyup事件：

var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);

textbox.dispatchEvent(event);

在Firefox中，調(diào)用createEvent()并傳入“KeyEvents”就可以創(chuàng)建一個(gè)鍵盤事件，返回的事件對象會包含一個(gè)initKeyEvent()方法，接收參數(shù)：

type；

bubbles；

cancelable；

view；

ctrlKey；

altKey；

shiftKey；

metaKey；

keyCode；

charCode；

另外，建議使用構(gòu)造函數(shù)“KeyboardEvent”

模擬其他事件

瀏覽器中很少使用變動事件和HTML事件；要模擬變動事件，可以用createEvent("MutationEvent");initMutationEvent();要模擬HTML事件，可以用createEvent("HTMLEvents");initEvent();

自定義DOM事件

用createEvent("CustomEvent");initCustomEvent()方法，接收參數(shù)：type；bubbles；cancelable；detail；

var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");

btn.onclick = function () {
    console.log(event.detail);
};

btn.dispatchEvent(evt);
IE中的事件模擬

調(diào)用document.createEventObject()方法，創(chuàng)建event對象，并指定必要的信息，最后在目標(biāo)上調(diào)用fireEvent()方法，接收兩個(gè)參數(shù)：事件處理程序名稱和event對象：

var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;

btn.fireEvent("onclick",evt);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78516.html

相關(guān)文章

  • 使用 javascript 替換 jQuery

    摘要：使用替換曾風(fēng)靡一個(gè)時(shí)代，大大降低了前端開發(fā)的門檻，豐富的插件也是前端開發(fā)者得心應(yīng)手的武器庫，但是，這個(gè)時(shí)代終于要落幕了。選取元素選擇器查詢常用的屬性選擇器都可以使用或替代。返回第一個(gè)匹配的返回所有匹配的組成的。最后使用方法觸發(fā)對象。 使用 javascript 替換 jQuery jQuery 曾風(fēng)靡一個(gè)時(shí)代，大大降低了前端開發(fā)的門檻，豐富的插件也是前端開發(fā)者得心應(yīng)手的武器庫，但是，這...

    zhangyucha0 評論0 收藏0

  • 【重溫基礎(chǔ)】20.事件

    摘要：本文是重溫基礎(chǔ)系列文章的第二十篇。事件捕獲為截獲事件提供機(jī)會，然后實(shí)際的目標(biāo)接收到事件，最后事件冒泡，對事件作出響應(yīng)。事件處理事件處理，即響應(yīng)某個(gè)事件。包括導(dǎo)致事件的元素事件類型等其他信息。 本文是 重溫基礎(chǔ) 系列文章的第二十篇。 這是第三個(gè)基礎(chǔ)系列的第一篇，歡迎持續(xù)關(guān)注呀！ 重溫基礎(chǔ) 系列的【初級】和【中級】的文章，已經(jīng)統(tǒng)一整理到我的【Cute-JavaScript】的Java...

    Blackjun 評論0 收藏0

  • JavaScript 事件——“內(nèi)存和性能”的注意要點(diǎn)

    摘要：事件委托對事件處理程序過多的問題的解決方案就是事件委托。最適合采用事件委托技術(shù)的事件包括和。移除事件處理程序通常造成空事件處理程序的原因有可能是操作等或使用等。以防止部分瀏覽器出現(xiàn)內(nèi)存問題。 事件委托 對事件處理程序過多的問題的解決方案就是事件委托。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個(gè)頁面指定一個(gè)onclick事件處理程序，而不必給每個(gè)可單擊的...

    YPHP 評論0 收藏0

  • JavaScript Ajax與Comet——“進(jìn)度事件”的注意要點(diǎn)

    摘要：有以下個(gè)進(jìn)度事件在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā)在請求發(fā)生錯(cuò)誤時(shí)觸發(fā)在因調(diào)用方法而終止連接時(shí)觸發(fā)在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)在通信完成或者觸發(fā)，，事件后觸發(fā)。 有以下6個(gè)進(jìn)度事件： loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。 progress: 在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā) error: 在請求發(fā)生錯(cuò)誤時(shí)觸發(fā) abort: 在因調(diào)用ab...

    ad6623 評論0 收藏0

  • JavaScript 事件——“事件流和事件處理程序”的注意要點(diǎn)

    摘要：事件流級事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認(rèn)為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時(shí)由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。如： ...

    Amio 評論0 收藏0

發(fā)表評論

0條評論

BakerJ

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<