概况
1 .DOM的事件操作，监听和触发，都定义在EventTarget接口，所有的节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象，XMLHttpRequest,AudioNode,AudioContext也部署了这个接口
实例方法
1 .addEventListener:绑定事件的监听函数
1 .在当前节点或者对象上，定义一个特定事件的监听函数，一旦事件发生，就会执行监听函数
2 .type:事件名称，大小写敏感
3 .listener:监听函数。事件发生时，调用此函数
4 .useCapture:布尔值，表示监听函数是否在捕获阶段触发，默认为false.
2 .removeEventListener：移除监听的函数
3 .dispatchEvent:触发事件
handleEvent
1 .第二个参数，除了可以是监听函数，还可以是一个具有handleEvent方法的对象。
2 .可以自己写组件的时候解决传入参数的问题
3 .如果想要向监听函数传递参数，可以使用匿名函数包装一下监听函数。
function print(x) {
console.log(x);
}
var el = document.getElementById('div1');
el.addEventListener('click', function () { print('Hello'); }, false);
4 .或者使用handleEvent来实现
5 .当指定的事件类型发生时被通知到一个对象。该参数必须是实现eventListener接口的一个对象或者函数。即第二个参数除了可以传入函数外，还可以传入对象.事件会自动在传入对象中寻找handleEvent方法
6 .this指向
7 .可以针对当前对象的同一个事件添加多个不同的监听函数，这些函数按照添加顺序触发，即先添加先触发
8 .面对不同的事情，有的你需要非常了解这个东西，然后才可以提出自己的创新，但是有的东西，别说别人只是做了一个苗头，甚至没有你都可以相除很多的东西。
9 .为同一个事件添加多个不同的监听函数，该函数只会执行一次，多余的添加将自动被去除
10 .除了dom，其他对象也有这个接口，比如window,xmlHttpRequest等，是整个js同一的监听函数接口
优点
1 .改变this指向，类似于一种函数事件的call调用
const h=document.querySelector('h1')
h.addEventListener('click',()=>{
console.log(this)
})
//这个this指向的是window
const h=document.querySelector('h1')
function hello(){
console.log(this)
}
h.addEventListener('click',hello)
//这样指向的是h，就是选择器选出来的元素
const h=document.querySelector('h1')
const obj={
name:'foo',
handleEvent:function(){
console.log(this.name)
console.log(this)
}
}
h.addEventListener('click',obj)
//1 .此时的this是obj,也就说，可以在这个里面传入一些参数,做框架的时候可以这样写一种形式
//2 .动态切换绑定事件的处理函数，而不需要remove之前的事件。直接改obj里面的handleEvent函数就可以
//3 .内聚所有的处理函数
var obj = {
name: 'foo',
handleEvent: function(e) {
switch(e.type) {
case "click":
console.log("click event");
break;
case "mousedown":
console.log("mousedown event");
break;
}
}
};
document.body.addEventListener('click', obj, false);
document.body.addEventListener('mousedown', obj, false)
//不同事件的处理逻辑放在一起，根据事件类型区分即可，而不用为每个事件类型定义不同的处理函数了，但是这样的话，写框架的时候还需要懂js的语法树来构建这个switch里面这些操作
属性配置对象
1 .第三个参数除了布尔值，还可以是一个属性配置对象
2 .capture:布尔值，就是本来的功能。是否在捕获阶段触发
3 .once:是否只监听触发一次，然后就自动移除
4 .passive:布尔值，表示监听函数是否调用事件的preeventDefault方法。
const options={
capture:false,
once:true,
passive:false,
}
h.addEventListener('click',obj,options)
EventTarget.removeEventListener()
1 .移除的函数必须是已经添加的，匿名函数是不能被移除的
2 .
EventTarget.dispacthEvent()
1 .在当前节点上触发指定事件，返回一个布尔值，是否调用成功
2 .也就说可以使用一些非常简单的事件，来触发一个不常见的事件调用。比如上下滚轮，实现音量降低。那其实这个不用这样写也可以啊
3 .搞不懂这个有什么用？
const event=new Event('click')
setTimeout(()=>{
console.log('123')
h.dispatchEvent(event)
},1000)
第二波
dom 0级模型
1 .没有事件流的概念，事件不会传播
2 .
ie事件模型
1 .事件处理阶段：时间到达目标元素，触发目标元素的监听函数
2 .事件冒泡阶段：事件从目标元素冒泡到了document，依次检查经过的节点是否绑定了事件监听函数
3 .
ie事件模型中的事件对象常用属性
1 .type
2 .srcElement
3 .cancelBubble阻止事件冒泡
4 .returnValue 阻止事件默认行为
