JavaScript 模擬事件觸發

事件觸發的模擬步驟


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. 觸發事件


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


使用例項(以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");


下面是我寫的一個模擬滑鼠單擊事件的函式:
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');
    }
}