js⼿动触发事件dispatchEvent（）
创建并触发事件
有两种⽅法可以实现⼿动触发事件，⼀种是如下所⽰的过时的繁琐的⽅式创建事件对象并触发事件：create--init--dispatch，还有⼀种(不兼容IE，但是建议使⽤)参考另⼀篇。
下⾯的⽅法将要从规范移除，除⾮真的需要，否则建议不要再使⽤了。
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'.
更多类型可以参考
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事件触发
blur事件需要注意的是在IE 5.5+版本上请⽤fireEvent⽅法，这是浏览器兼容的问题。
4. 例⼦
//例⼦1  ⽴即触发⿏标点击事件
var fireOnThis = ElementById('someID');
var evObj = ateEvent('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 = ElementById('someID');
if( ateEvent )
{
var evObj = ateEvent('MouseEvents');
evObj.initEvent( 'mousemove', true, false );
fireOnThis.dispatchEvent(evObj);
} else if( ateEventObject ) {
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 = ElementById('a');
var evObj = ateEvent('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:729038198，我们将在24小时内删除。