博客

js手动触发事件dispatchEvent()

  • Post author:
  • Post category:其他


创建并触发事件

有两种方法可以实现手动触发事件，一种是如下所示的

过时的繁琐的

方式创建事件对象并触发事件：

create–init–dispatch

，还有一种(不兼容IE，但是建议使用)参考另一篇

JavaScript原生实现事件监听及手动触发

。


下面的方法将要从规范移除，除非真的需要，否则建议不要再使用了。


1. createEvent（eventType）


参数：eventType 包含许多种类型：

  • 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’.


更多类型可以参考

createEvent


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 )


更详细的说明同样可以参考

createEvent

，查看事件对应的初始化方法。


3. 在初始化完成后就可以随时触发需要的事件了，为大家介绍targetObj.dispatchEvent(event)

使targetObj对象的event事件触发


需要注意的是在IE 5.5+版本上请用

fireEvent

方法，这是浏览器兼容的问题。


4. 例子
 

//例子1  立即触发鼠标点击事件
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.addEventListener("click", function() { console.log("click触发了"); });
fireOnThis.dispatchEvent(evObj);

//例子2  考虑兼容性的一个鼠标移动事件
var fireOnThis = document.getElementById('someID');
if( document.createEvent ) 
{
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( 'mousemove', true, false );
    fireOnThis.dispatchEvent(evObj);
} else if( document.createEventObject ) {
    fireOnThis.fireEvent('onmousemove');
}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    
</head>
<body>
    <div id="a" onclick="alert(1);">321321</div>
    
    <script type="text/javascript">
        // 立即触发鼠标按下事件
        var fireOnThis = document.getElementById('a');
        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);
    </script>
</body>
</html>


版权声明：本文为qq_35134066原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。