今天小編就爲大家分享一篇關於JavaScript"模擬事件"的注意要點詳解,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
DOM中的事件模擬
三個步驟:
首先通過document.createEvent()
方法創建event對象,接收一個參數,即表示要創建的事件類型的字符串:
- UIEvents(DOM3中的UIEvent)鼠標和鍵盤事件;
- MouseEvents(DOM3中的MouseEvent)鼠標事件;
- MutationEvents(DOM3中的MutationEvent)變動事件;
- HTMLEvents(沒有DOM3中對應的事件)HTML事件;
其次在創建了event對象之後,還需要使用與事件有關的信息對其進行初始化。每種類型的event對象都有一個特殊的方法,爲它傳入適當的數據就可以初始化該event對象。用event.init......()
此類行的方法。
最後就是觸發事件。這需要使用dispatchEvent()
方法,接收一個參數,即表示要觸發的event對象。
模擬鼠標事件
首先創建鼠標事件對象的方法createEvent()傳入MouseEvents,返回的對象的方法initMouseEvent(),接收15個信息:
- type(字符串):事件類型如“click”;
- bubble(布爾值):是否冒泡;
- cancelable(布爾值):是否可取消;
- view(AbstractView):與事件關聯的視圖,一般爲
document.defaultView
; - detail(整數):一般爲0,一般只有事件處理程序使用;
- screenX(整數):事件相對於屏幕的X座標;
- screenY(整數);
- clientX(整數):事件相對於視口的X座標;
- clientY(整數);
- ctrlKey(布爾值):是否按下了Ctrl鍵,默認爲false;
- altKey(布爾值);
- shiftKey(布爾值);
- metaKey(布爾值);
- button(整數):表示按下了哪個鼠標鍵,默認爲0;
- relatedTarget(對象):表示與事件相關的對象。一般只有在模擬mouseover與mouseout時使用。
最後記得把event對象傳給dispatchEvent()方法。
如模擬按鈕的單擊事件:
//模擬click事件 //獲取btn var btn = document.querySelector("#btn"); //創建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"); } //觸發事件 btn.dispatchEvent(event); //hello //取消引用 btn.onclick = null;
另外,建議使用構造函數"MouseEvent":
var evt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window });
模擬鍵盤事件
首先創建鼠標事件對象的方法createEvent()傳入KeyboardEvents,返回的對象的方法initKeyEvent(),接收下面參數:
- type(字符串):要觸發的事件類型,“keydown”等;
- bubbles(布爾值):表示事件是否應該冒泡;
- cancelable(布爾值):是否可以取消;
- view(AbstractView):與事件關聯的視圖。一般爲
document.defaultView
; - key(布爾值):表示按下的鍵的鍵碼;
- location(整數):表示按下哪裏的鍵。0爲主鍵盤;1爲左;2爲右;3爲數字鍵盤;4爲虛擬鍵盤;5爲手柄;
- modifiers(字符串):空格分隔的修改鍵列表,如“shift”;
- repeat(整數):在一行中按下了多少次這個鍵;
由於DOM3級不提倡使用keypress事件,因此只能利用這種技術來模擬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中,調用createEvent()並傳入“KeyEvents”就可以創建一個鍵盤事件,返回的事件對象會包含一個initKeyEvent()方法,接收參數:
- type;
- bubbles;
- cancelable;
- view;
- ctrlKey;
- altKey;
- shiftKey;
- metaKey;
- keyCode;
- charCode;
另外,建議使用構造函數“KeyboardEvent”
模擬其他事件
瀏覽器中很少使用變動事件和HTML事件;要模擬變動事件,可以用createEvent("MutationEvent");initMutationEvent();要模擬HTML事件,可以用createEvent("HTMLEvents");initEvent();
自定義DOM事件
用createEvent("CustomEvent");initCustomEvent()方法,接收參數: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中的事件模擬
調用document.createEventObject()
方法,創建event對象,並指定必要的信息,最後在目標上調用fireEvent()方法,接收兩個參數:事件處理程序名稱和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);
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。如果你想了解更多相關內容請查看下面相關鏈接