js手动触发事件dispatchEvent()

您所在的位置：网站首页 › selenium监听手动事件 › js手动触发事件dispatchEvent()

js手动触发事件dispatchEvent()

2024-07-13 02:15| 来源: 网络整理| 查看: 265

创建并触发事件

有两种方法可以实现手动触发事件，一种是如下所示的过时的繁琐的方式创建事件对象并触发事件：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'); } 321321 // 立即触发鼠标按下事件 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);

【本文地址】

js手动触发事件dispatchEvent()

js手动触发事件dispatchEvent()

今日新闻

推荐新闻