1、初始化事件 事件对象
原生js中事件类型包括有系统事件和自定义事件
var evt = new Event(事件类型,事件选项)
2、创建一个事件目标对象的实例化对象,没有参数
var target = new EventTarget();
3、EventTarget和Event结合使用
EventTarget是事件目标对象,用来侦听事件,(Event)事件对象就是被侦听的事件内容
比如:张三接收一份邮件,张三就是EventTarget,邮件就是Event
4、先创建一个自定义事件
1)事件侦听
EventTarget的方法--添加侦听事件:addEventListener,有三个参数,第三个参数可选
addEventListener(事件类型,事件回调函数,是否捕获侦听/事件侦听选项{是否捕获侦听,是否只侦听一次})
特点
- 所有事件回调函数命名都需要使用Handler结尾单词
- 事件回调函数尽量不要使用匿名函数,因为使用匿名函数后,这个事件将无法被删除
- 事件类型中自定义事件名称可以使用任意字符串
- 当接受到pingzi这个事件类型时,直接调用事件的回调函数pingziHandler
- 事件的回调函数中有且只有一个参数,就是抛发的事件对象
target.addEventListener('pingzi',pingziHandler);
function pingziHandler(e){
}
//也可以把回调函数写在里面,如下:
//尽量不要使用匿名函数,因为使用匿名函数后,这个事件将无法被删除
target.addEventListener('pingzi',function(){
});
2)创建事件:创建事件时,事件类型必须和侦听事件时的事件类型完全一致
var evt = new Event('pingzi');
3)事件抛发:使用EventTarget抛发事件,把Event这个事件对象抛发给EventTarget
事件侦听的对象要和抛发给目标对象必须一致
target.dispatchEvent(evt);
4)事件回调函数:事件回调函数必须和事件侦听时的回调函数引用指向完全相同
function pingziHandler(){
//删除事件侦听内容,removeEventListener('事件类型',事件回调函数)
target.removeEventListener('pingzi',pingziHandler);
console.log('aaa');//在控制台成功打印aaa就说明事件抛发成功
}
5)删除事件侦听内容(写在事件回调函数里面),removeEventListener('事件类型',事件回调函数)
target.removeEventListener('pingzi',pingziHandler);
小结:
- 1、事件侦听的目标对象必须和事件要抛发的目标对象一致
- 2、事件侦听的事件类型和要发抛发事件的事件类型必须一致
- 3、必须先侦听,后抛发
// 所有继承EventTarget的类型,都可以做事件的侦听和抛发
// document--- HTMLDocument-->Document-->Node-->EventTarget-->Object
console.dir(document);
5、事件有什么作用,解耦--解决强耦合
什么是耦合?一个简单栗子:如下。o1和o2之间有数据传递,当删除和修改o2时,必须要对o1也进行修改,这就是强耦合
// 耦合
var o1 = {
a:1,
play(){
o2.run(this.a)//this--o1,o1.a--1
}
}
var o2 = {
run(n){
console.log(n);//1
}
}
o1.play();
解耦:侦听和抛发,无论修改或删掉谁都不会报错,因为都没有互相调用,而是利用事件传递数据,中介是document,---解耦
var o1 = {
a:5,
play(){
//evt是个对象
var evt = new Event('apple');
//给evt这个对象添加属性
evt.data = this.a;
document.dispatchEvent(evt);
}
}
var o2 = {
init(){
//当侦听到apple这歌事件,会执行run函数
document.addEventListener('apple',this.run);
},
//run中的参数e就是play方法中抛发的evt对象
run(e){
console.log(e.data);
}
}
//先侦听
o2.init();
//后抛发
o1.play();
//无论修改或删掉谁都不会报错,因为都没有互相调用,而是利用事件传递数据,中介是document,---解耦
其中:
所有继承EventTarget的类型,都可以做事件的侦听和抛发
document--- HTMLDocument-->Document-->Node-->EventTarget-->Object