原生js自動觸發事件

熟悉jquery的童鞋都知道在jq中有一個方法可以自動觸發事件，那就是trigger（），那么通過原生js又怎么模擬觸發呢？

js中添加一個主動觸發事件的方法有dispatch。該方法能模擬用戶行為，如點擊（click）操作等。 標准使用dispatchEvent方法，IE6/7/8則使用fireEvent方法。

 

dispatchEvent() 方法給節點分派一個合成事件。

語法如下：

dispatchEvent(eventObj)
eventObj 參數是一個描述事件的 ActionScript 對象
在調用 dispatchEvent() 方法之前，必須在代碼中對其進行聲明，此外，還必須創建一個事件對象以傳遞給 dispatchEvent()。該事件對象包含偵聽器可用來處理該事件的有關信息。

使用時具體流程如下：

creatEvent-------initEvent--------dispatchEvent

具體如下

1. createEvent（eventType），該方法將創建一種新的事件類型，該類型由參數 eventType 指定。注意，該參數的值不是要創建的事件接口的名稱，而是定義那個接口的 DOM 模塊的名稱。

參數：eventType 共5種類型：
    Events ：包括所有的事件.
          HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select',
                                    'submit', 'unload'. 事件
          UIEevents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
                                  間接包含 MouseEvents.
          MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
          MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved',
                                      'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument',
                                      'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
2. 在createEvent后必須初始化，為大家介紹5種對應的初始化方法
      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 )
3. 在初始化完成后就可以隨時觸發需要的事件了，為大家介紹targetObj.dispatchEvent(event)使targetObj對象的event事件觸發 需要注意的是在IE 5.5+版本上請用fireEvent方法，還是瀏覽兼容的考慮。

 

類似封裝方法如下：

var rect={   dispatch : function(el ,type){

        try{

            if(el.dispatchEvent){

                var evt = document.createEvent('Event');

                evt.initEvent(type,true,true);

                el.dispatchEvent(evt);

            }else if(el.fireEvent){

                el.fireEvent('on'+type);

            }

        }catch(e){};

    }};

地址：https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent

轉載：https://www.cnblogs.com/mopagunda/p/4899341.html