JS事件介绍

1、初始化事件 事件对象

原生js中事件类型包括有系统事件和自定义事件

var evt = new Event(事件类型，事件选项)

2、创建一个事件目标对象的实例化对象，没有参数

var target = new EventTarget();

3、EventTarget和Event结合使用

EventTarget是事件目标对象，用来侦听事件，(Event)事件对象就是被侦听的事件内容

比如：张三接收一份邮件，张三就是EventTarget，邮件就是Event

4、先创建一个自定义事件

1)事件侦听

EventTarget的方法--添加侦听事件：addEventListener，有三个参数，第三个参数可选

addEventListener(事件类型，事件回调函数，是否捕获侦听/事件侦听选项{是否捕获侦听，是否只侦听一次})

特点

1. 所有事件回调函数命名都需要使用Handler结尾单词
2. 事件回调函数尽量不要使用匿名函数，因为使用匿名函数后，这个事件将无法被删除
3. 事件类型中自定义事件名称可以使用任意字符串
4. 当接受到pingzi这个事件类型时，直接调用事件的回调函数pingziHandler
5. 事件的回调函数中有且只有一个参数，就是抛发的事件对象

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