事件觸發(fā)的模擬步驟


Step 1. document.createEvent(eventType)


eventType 共5種類型：Events、HTMLEvents、UIEevents、MouseEvents、MutationEvents。


● Events ：所有的事件。
● HTMLEvents：abort、blur、change、error、focus、load、reset、resize、scroll、select、submit、unload。
● UIEevents：DOMActivate、DOMFocusIn、DOMFocusOut、keydown、keypress、keyup。
● MouseEvents：click、mousedown、mousemove、mouseout、mouseover、mouseup。
● MutationEvents：DOMAttrModified、DOMNodeInserted、DOMNodeRemoved、DOMCharacterDataModified、DOMNodeInsertedIntoDocument、DOMNodeRemovedFromDocument、DOMSubtreeModified。


Step 2. 初始化事件


● HTMLEvents 和 Events：initEvent('type', bubbles, cancelable)
● UIEvents：initUIEvent('type', bubbles, cancelable, windowObject, detail)
● MouseEvents：initMouseEvent('type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget)
● MutationEvents：initMutationEvent('type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange)


Step 3. 觸發(fā)事件


● targetObj.dispatchEvent：Firefox、Chrome、IE9&IE9+
● targetObj.fireEvent：IE（使用 fireEvent 時不需要進行事件的創(chuàng)建和初始化）


使用實例(以IE為例)


● //使用dispatchEvent
● var fireOnThis = document.getElementById('someID');
● var evObj = document.createEvent('MouseEvents');
● evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
● fireOnThis.dispatchEvent(evObj);


● //使用fireEvent
● var obj = document.getElementById('someID');
● obj.fireEvent("onclick");


下面是我寫的一個模擬鼠標(biāo)單擊事件的函數(shù):
function fireClick(linkId) {


? ? var fireOnThis = document.getElementById(linkId);
? ? if (document.createEvent) {
? ? ? ? //共5種類型：Events、HTMLEvents、UIEevents、MouseEvents、MutationEvents。
? ? ? ? var evObj = document.createEvent('MouseEvents');
? ? ? ? evObj.initEvent('click', true, false);
? ? ? ? fireOnThis.dispatchEvent(evObj);
? ? }
? ? else if (document.createEventObject) {
? ? ? ? fireOnThis.fireEvent('onclick');
? ? }
} 與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的JavaScript 模拟事件触发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。