熟悉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){}; }
};

 

 

 

版权声明:本文为mopagunda原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/mopagunda/p/4899341.html