事件对象

1.什么是事件？

  浏览器赋予元素天生默认的一些行为，不论是否绑定相关的方法，只要行为操作进行了，那么一定会触发相关的事件行为

2.什么是事件绑定？

  给元素的某一个事件行为绑定方法，目的是行为触发后可以做点自己想做的事情

3.事件绑定 DOM0事件绑定/DOM2事件绑定

【DOM0事件绑定】
元素.onxxx=function(){}
元素.onxxx=null;  

原理：给DOM元素对象的某一个私有事件属性赋值函数值，当用户触发这个事件行为，JS引擎会帮助我们把之前绑定的方法执行的
		=>1.不是所有的事件类型都支持这种方式，元素有哪些onxxx事件属性，才能给其绑定方法（例如：DOMContentLoaded事件就不支持这种绑定方案）
		=>2.只能给当前元素的某一个事件行为绑定一个方法（绑定多个也只能识别最后一个）
		
【DOM2事件绑定】
元素.addEventListener([事件类型],[方法],[传播模式])
元素.removeEventListener([事件类型],[方法],[传播模式])

function anonymous(){
	console.log('ok');
}
box.addEventListener('click',anonymous,false);
box.removeEventListener('click',anonymous,false);
原理：基于原型链查找机制，找到EventTarget.prototype上的addEventListener方法执行，它是基于浏览器事件池机制完成事件绑定的

4.事件对象

当前元素的某个事件行为被触发，不仅会把绑定的方法执行，还会给绑定的方法传递一个实参，这个实参就是事件对象；事件对象就是用来存储当前行为操作相关信息的对象；（MosueEvent/KeyboardEvent/Event/TouchEvent...）
=>事件对象和在哪个方法中拿到的没关系，它记录的是当前操作的信息

给元素的事件行为绑定方法，当事件行为触发，方法会被执行，不仅被执行，而且还会把当前操作的相关信息传递给这个函数 => “事件对象”

—如果是鼠标操作，获取的是MouseEvent类的实例 => 鼠标事件对象

鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype -> Event.prototype -> Object.prototype

—如果是键盘操作，获取的是KeyboardEvent类的实例 =>键盘事件对象

—除了以上还有:普通事件对象(Event)、手指事件对象(TouchEvent)等

鼠标事件对象

• clientX/clientY: 当前鼠标触发点距离当前窗口左上角的X/Y轴坐标
• pageX/pageY: 触发点距离当前页面左上角的X/Y轴坐标
• type: 触发事件的类型
• target: 事件源(操作的是哪个元素，哪个元素就是事件源)，在不兼容的浏览器中可以使用srcElement获取，也代表的是事件源
• preventDefault(): 用来阻止默认行为的方法，不兼容的浏览器中用ev. returnValue=false也可以阻止默认行为
• stopPropagation(): 阻止冒泡传播，不兼容的浏览器中用ev.cancelBubble=true也可以阻止默认行为
  

let obj = null; .
box. addEventListener('click', function (ev) {
	console.1og(ev);
	obj = ev;
});
box . addEventListener( 'click', function (ev) {
	console.1og(ev === obj); //=>true
});
document . body.onclick = function (ev) {
	console.log(ev === obj); //=>true
}

事件对象和函数以及给谁绑定的事件没啥必然关系，它存储的是当前本次操作的相关信息，操作一次只能有一份信息，所以在哪个方法中获取的信息都是一样的;第二次操作，存储的信息会把上一次操作存储的信息替换掉…;

每一次事件触发，浏览器都会这样处理一下

• 捕获到当前操作的行为(把操作信息获取到)，通过创建MouseEvent等类的实例，得到事件对象EV
• 通知所有绑定的方法(符合执行条件的)开始执行，并且把EV当做实参传递给每个方法，所以在每个方法中得到的事件对象其实都是一个
• 后面再重新触发这个事件行为，会重新获取本次操作的信息，用新的信息替换老的信息，然后继续之前的步骤…