JS中手動建立事件來觸發相應事件的方法

1. createEvent（eventType）
參數：eventType 共5種類型：
    Events ：包括全部的事件. 
          HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 
                                    'submit', 'unload'. 事件
          UIEvents ：包括 '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方法，仍是瀏覽兼容的考慮

4. 例子
    //例子1  當即觸發鼠標被按下事件

    var fireOnThis = document.getElementByIdx_x('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);

  //例子2  考慮兼容性的一個鼠標移動事件

var fireOnThis = document.getElementByIdx_x('someID');
    if( document.createEvent ) 
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initEvent( 'mousemove', true, false );
        fireOnThis.dispatchEvent(evObj);
    }
  else if( document.createEventObject )
  {
      fireOnThis.fireEvent('onmousemove');
  }

 

本人使用的是以下代碼，在代理綁定的事件上使用此方法來觸發相應事件，直接 mouseover() 沒有效果。

var evObj = document.createEvent('MouseEvents');
        evObj.initEvent( 'mouseover', true, false );
        el[0].dispatchEvent(evObj);

這個是建立了一個鼠標移入的事件，從el 這個對象上開始傳遞出去。爲何要寫el[0]，由於el是一個JQ對象。經過[0]來轉化爲原生JS對象。才能使用此方法。

 

 

本人微信：   本人QQ：