在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(),form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件。还有就是为了满足特定的需求,比如模块之间的通信,传递信息,提供了几种自定义事件的几种方式
自定义事件的方式:
- Event()构造函数,创建一个新的事件对象Event
- CustomEvent()创建一个自定义事件(可以在web worker中使用)
- document.createEvent()创建一新的事件,随之必须调用自身的init方法进行初始化。
1.Event
event = new Event(typeArg, eventInit);
是DOMString 类型,表示所创建事件的名称。
eventInit可选
是 EventInit 类型的字典,接受以下字段:
- “bubbles”,可选,Boolean类型,默认值为 false,表示该事件是否冒泡。
- “cancelable”,可选,Boolean类型,默认值为 false, 表示该事件能否被取消。
- “composed”,可选,Boolean类型,默认值为 false,指示事件是否会在影子DOM根节点之外触发侦听器。
- 注意:ie尚为实现。
// 创建一个支持冒泡且不能被取消的look事件
var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);
// 事件可以在任何元素触发,不仅仅是document
myDiv.dispatchEvent(ev);
2.CustomEvent
CustomEvent(
DOMString type,
optional CustomEventInit eventInitDict
)
type 事件的类型名称.
CustomEventInit eventInitDict 一个对象,提供了事件的配置信息.
bubbles:一个布尔值,表明该事件是否会冒泡.
cancelable:一个布尔值,表明该事件是否可以被取消.
detail:当事件初始化时传递的数据.
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
3.document.createEvent(eventTyep)
eventType:
-
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’.
实例:
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);
js自定义事件
js自动触发事件&&自定义事件 Event
题外笔记
js提供了click(),方法可以用来模拟鼠标左键单击一个元素。
在支持click方法的元素上使用该方法时,会触发该元素的的点击事件。该事件会一直向文档树的上层元素冒泡,也会触发他们各自的click事件
语法
element.click()
Example
模拟一个点击,当鼠标悬浮到CheckBox上时
HTML
<form>
<input type="checkbox" id="icb" onmousemove="myFunction()" onclick="alert('click event occured')">
</form>
JavaScript
function myFunction(){
document.getElementById("icb").click();
}
form提供了reset()
form 有个方法是 reset(),作用不是清空 标签中的所有输入栏,而是回到上一次载入页面时的状态。
document.querySelector('#input-form').reset()
其他模拟事件
1.按键模拟:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent
2.UI事件模拟:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent