JavaScript 模拟事件触发

最新推荐文章于 2022-07-12 10:38:25 发布

原创最新推荐文章于 2022-07-12 10:38:25 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

本文介绍如何通过JavaScript模拟鼠标点击事件，包括创建不同类型的事件对象、初始化事件属性及触发事件的方法，并提供了一个兼容多种浏览器的示例函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件触发的模拟步骤

Step 1. document.createEvent(eventType)

eventType 共5种类型：Events、HTMLEvents、UIEevents、MouseEvents、MutationEvents。

● Events ：所有的事件。
● HTMLEvents：abort、blur、change、error、focus、load、reset、resize、scroll、select、submit、unload。
● UIEevents：DOMActivate、DOMFocusIn、DOMFocusOut、keydown、keypress、keyup。
● MouseEvents：click、mousedown、mousemove、mouseout、mouseover、mouseup。
● MutationEvents：DOMAttrModified、DOMNodeInserted、DOMNodeRemoved、DOMCharacterDataModified、DOMNodeInsertedIntoDocument、DOMNodeRemovedFromDocument、DOMSubtreeModified。

Step 2. 初始化事件

● 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)

Step 3. 触发事件

● targetObj.dispatchEvent：Firefox、Chrome、IE9&IE9+
● targetObj.fireEvent：IE（使用 fireEvent 时不需要进行事件的创建和初始化）

使用实例(以IE为例)

● //使用dispatchEvent
● 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.dispatchEvent(evObj);

● //使用fireEvent
● var obj = document.getElementById('someID');
● obj.fireEvent("onclick");

下面是我写的一个模拟鼠标单击事件的函数:
function fireClick(linkId) {

var fireOnThis = document.getElementById(linkId);
if (document.createEvent) {
//共5种类型：Events、HTMLEvents、UIEevents、MouseEvents、MutationEvents。
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('click', true, false);
fireOnThis.dispatchEvent(evObj);
}
else if (document.createEventObject) {
fireOnThis.fireEvent('onclick');
}
}