Event 介绍
鲁迅曾经说过,要想DOM玩的好,Event事件不可少。在开发中不可能不遇到不跟事件的打交道的场景,如果有,就当我没说。常用的比如触发一个键盘回车事件、鼠标点击事件、自定义事件等....
上图就是事件的全家桶,代表web中有哪些事件,第二张图代表事件的属性,所有的事件对象所初始化需要的属性都是继承于Event,当然不同的事件所需要的属性不一样,常用的也就鼠标事件和键盘事件。其他不是没用,只是用的少,就跟现在手机上的红外线功能一样,我可以不用,但是你不能没有。
- createEvent 手动触发 > 这是domcument 提供的一个方法用于创建一个事件
- 作用:用于创建事件
- eventType:上图的那些类型
- 返回值: 新创建的 Event 对象,具有指定的类型。
- 随之必须调用自身的 init 方法进行初始化。
- 参考地址
1. click事件案例
话不多说,直接看代码
<body>
<button type="button" id="testBtn">你点下逝世</button>
</body>
testBtn.addEventListener('click',function(e){
console.log('手动触发!',e)
})
var myEvent = document.createEvent("MouseEvent");
// 自定义事件回调函数的参数
myEvent.data = {
msg: '王某'
}
myEvent.initMouseEvent('click', true, false)
testBtn.dispatchEvent(myEvent)
运行结果:
上图的event为 MouseEvent 事件对象,打印出来有很多属性,有些event 事件事没有这么多的。
2. 键盘回车事件
testBtn.addEventListener('keydown',function(e){
console.log('键盘事件',e)
})
var myEvent = document.createEvent("KeyboardEvent");
// 自定义事件回调函数的参数
myEvent.data = {
msg: '王某'
}
myEvent.initKeyboardEvent('keydown', true, false,document.view,13,13,13,false,false) // 13代表回车
testBtn.dispatchEvent(myEvent)
之前初始化键盘事件也可用 initKeyEvent 在最新的DOM3 级事件标准中已经废弃。
但是使用 initKeyboardEvent 初始化 按照MDN上的语法进行初始化发现
返回的事件属性里的keyCode 里不是设置好的13 一直是0 有猫病。 难道是不同浏览器有差异吗?
UIEvent 触发事件
UIEvent 接口表示简单的用户界面事件。(MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent, InputEvent) 其实用上面的document.createEvent('UIEvent') 也是可以的,它更像是一些常用事件的简称
1.手动触发click
var myEvent = document.createEvent("UIEvent");
// 自定义事件回调函数的参数
myEvent.data = {
msg: '王某'
}
myEvent.initUIEvent('click', true, false)
testBtn.dispatchEvent(myEvent)
let ev = new UIEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}) UIEvent 接口表示简单的用户界面事件。
testBtn.dispatchEvent(ev)
第二个参数就是上面继承Event 需要的属性
Event触发事件
其他很多事件都是由Event派生出来,其本身也是个构造函数,可以返回一个event对象用于触发事件
let event = new Event('click',{"bubbles":true, "cancelable":false})
testBtn.dispatchEvent(event)
以上三个触发事件的方式:
- 第一个每次创建后都需要进行相应的init 初始化操作,
- 第二三个不需要,但是返回的是不同的事件对象,分别也是有不同的属性,只不过大部分也是继承了event属性。
- 第一个事件对象 为uiEvent 返回
- 第二个为document.creteEvent('KeyboardEvent')
对应事件触发
对于KeyboardEvent 键盘事件,由于有时候需要触发指定的案件,比如回车,但是以上都是基于event 的,返回的对象里没有keycode字段,用document.creteEvent的方式,设置了貌似也没生效,所有我们可以直接初始化对应的事件来触发。
KeyboardEvent
var evt = new KeyboardEvent('keydown', { // 键盘事件
bubbles: true,
key:13,
keyCode:13,
cancelable: true,
view: window,
});
第一个键盘事件对象由document.createEvent('KeyboardEvent') 触发 设置了keycode 但是没有效果 第二个是直接实例化一个KeyboardEvent对象进行设置,返回的keycode里由对应的值,也触发了回车事件。
自定义事件触发
- 利用Event 可以触发我们自定义的事件
document.addEventListener('Good',function (e) {
console.log(e)
console.log(`我被触发了,${e.data.msg}`);
},true);
let myEvent = new Event('Good',{"bubbles":true, "cancelable":false})
myEvent.data = {
msg: '王某F'
}
document.dispatchEvent(myEvent)
- 利用HTMLEvents
var myEvent = document.createEvent("HTMLEvents");
// 自定义事件回调函数的参数
myEvent.data = {
msg: '王某'
}
myEvent.initEvent('GoodNight', true, false) // 13代表回车
document.dispatchEvent(myEvent)
总结
event 为所有事件的一个基类,不管是UIEvent mouseEvent 还是keycodeEvent 都是它的后代 document.createEvent() 第一个参数就是基于event的事件类型,这种方式创建的必须进行初始化 对于需要设置具体参数的事件,可以直接new 实例化进行创建事件对象