js自动触发事件&&自定义事件

您所在的位置：网站首页 › js主动触发click › js自动触发事件&&自定义事件

js自动触发事件&&自定义事件

2023-06-12 18:20| 来源: 网络整理| 查看: 265

在有些情况下，我们需要程序逻辑自动触发元素的事件，例如js提供了click()， form提供了reset(),submit()等方法！在jquery中提供了trigger()方法帮助我们自动触发事件，原理是什么呢？接下来让我们一探究竟！

一、eventType

eventType共有5种类型：

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'.

上述加粗的是经常会用到的事件类型

二、createEvent（eventType）

以eventType=MouseEvents，触发事件为click为例：

document.body.onclick=function(){ alert("hello") } var event = document.createEvent('MouseEvents'); // initEvent接受3个参数： // 事件类型，是否冒泡，是否阻止浏览器的默认行为 event.initEvent("click", false, true); //触发document上绑定的click事件 document.body.dispatchEvent(event);

通过el.dispatchEvent触发事件，聪明的你有没有想到vue里的$emit?

三、自定义事件 document.body.addEventListener("veb",function(e){ alert(e.eventType) }) var event = document.createEvent('HTMLEvents'); // initEvent接受3个参数： // 事件类型，是否冒泡，是否阻止浏览器的默认行为 event.initEvent("veb", false, true); //通过eventType传递事件信息 event.eventType="I love Veblen" //触发document上绑定的click事件 document.body.dispatchEvent(event);

如果没什么意外，上面代码执行，你会向Veblen表白!

【本文地址】

js自动触发事件&&自定义事件

js自动触发事件&&自定义事件

今日新闻

推荐新闻