js 模拟点击事件

本文介绍了JavaScript中模拟点击事件的几种方法,包括element.click()、jQuery的click()或trigger()方法,以及使用MouseEvent和createEvent进行模拟。特别指出,createEvent方法已过时,推荐使用特定事件构造器。详细讲解了MouseEvent的初始化参数,并提供了示例代码。

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

1、element.click()

2、jquery $(element).click()或者trigger()该方法只会触发onclick的方法,如a点击跳转href 需要$(a)[0].click()

3、mouseEvent

event = new MouseEvent(typeArg, mouseEventInit)

typeArg

DOMString 格式的事件名称。

mouseEventInit 可选 具体参数查考https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/MouseEvent

eg:event = new MouseEvent('click');document.getElementsByTagName('a').dispatchEvent(event)

4、createEvent 处理mouseEvent的兼容 

tips:不要再用此方法,已过时。

使用特定的事件构造器来替代它,像 MouseEvent()创建并发送事件 页面里有更多的使用信息。

var event = document.createEvent(type);

创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent

  • event 就是被创建的 Event 对象.
  • type 是一个字符串,表示要创建的事件类型。事件类型可能包括"UIEvents""MouseEvents""MutationEvents", 或者 "HTMLEvents"。 

初始化方法:

event.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY,
                     ctrlKey, altKey, shiftKey, metaKey,
                     button, relatedTarget);参数对一个mouseEvent中的

type

设置事件类型type 的字符串,包含以下几种鼠标事件:click,mousedownmouseupmouseovermousemovemouseout

canBubble

是否可以冒泡。取值集合见Event.bubbles

cancelable

是否可以阻止事件默认行为。取值集合见Event.cancelable

view

事件的AbstractView对象引用,这里其实指向window 对象。取值集合见 UIEvent.view

detail

事件的鼠标点击数量。取值集合见Event.detail

screenX

事件的屏幕的x坐标。取值集合见MouseEvent.screenX

screenY

事件的屏幕的y坐标。取值集合见MouseEvent.screenY

clientX

事件的客户端x坐标。取值集合见MouseEvent.clientX

clientY

事件的客户端y坐标。取值集合见MouseEvent.clientY

ctrlKey

事件发生时 control 键是否被按下。取值集合见MouseEvent.ctrlKey

altKey

事件发生时 alt 键是否被按下。取值集合见MouseEvent.altKey

shiftKey

事件发生时 shift 键是否被按下。取值集合见MouseEvent.shiftKey

metaKey

事件发生时 meta 键是否被按下。取值集合见MouseEvent.metaKey

button

鼠标按键值 button

relatedTarget

事件的相关对象。只在某些事件类型有用 (例如 mouseover ?和 mouseout)。其它的传null。

事件模块传递给 createEvent的Event type事件初始化方法
DOM Level 2 Events
User Interface event module"UIEvents"event.initUIEvent
Mouse event module"MouseEvents"event.initMouseEvent
Mutation event module"MutationEvents"event.initMutationEvent
HTML event module"HTMLEvents"event.initEvent
DOM Level 3 Events
User Interface event module"UIEvent""UIEvents"event.initUIEvent
Mouse event module"MouseEvent""MouseEvents"event.initMouseEvent
Mutation event module"MutationEvent""MutationEvents"event.initMutationEvent
Mutation name event module (not implemented in Gecko as of June 2006)"MutationNameEvent"event.initMutationNameEvent
Text event module"TextEvent" (Gecko also supports "TextEvents")event.initTextEvent (not implemented)
Keyboard event module"KeyboardEvent" (Gecko also supports "KeyEvents")event.initKeyEvent (Gecko-specific; the DOM 3 Events working draft uses initKeyboardEvent instead)
Custom event module"CustomEvent"event.initCustomEvent
Basic events module"Event" (Gecko also supports "Events")event.initEvent
SVG 1.1 Scripting
SVG"SVGEvents" (Gecko also supports "SVGEvent")event.initEvent
"SVGZoomEvents" (Gecko also supports "SVGZoomEvent")event.initUIEvent
 

 

自定义事件

// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值