事件对象

1.什么是事件对象：

　官方解释：event 对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态 

　简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

2.事件对象的使用语法：

　eventTarget.onclick=function( event ){

　　//这个 event 就是事件对象 ， 我们还喜欢的写成 e 或者 evt

　}

　eventTarget.addEventListener('click',function( event ){

　　// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

　} )

　这个 event 是个形参，系统帮我们设定为事件对象， 不需要传递实参过去

　当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

3.事件对象的兼容性方案

　事件对象本身的获取存在兼容问题：

　　1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取

　　2.在 IE6 - 8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

　　解决：

　　　　e = e || window.event;

4.事件对象的常见属性和方法

e.target      返回触发事件的对象   标准

e.srcElement   返回触发事件的对象   非标准  ie6-8 使用

e.type     返回事件的类型   click  mouseover   不带 on

e.cancelBubble     阻止冒泡  非标准  ie6-8 使用

e.stopPropagation()   阻止冒泡   标准

e.returnValue  阻止默认事件（默认行为）非标准  ie6-8使用   比如不让链接跳转

e.preventDefault()  阻止默认事件（默认行为） 标准  比如不让链接跳转

　案例1：e.target 和 this 的区别：

　this 有一个非常相似的属性 currentTarget  ie678不认识  ，不常用　　

　e.target 返回的是触发事件的对象（元素）

　this  返回的是绑定事件的对象（元素）

　　var ul = document . querySelector('ul');

　　ul.addEventListener('click',function(e){

　　　　console.log(this);   //  ul

　　　　console.log(e.target)   // li

　　})

　　兼容性：

　　ul.onclick=function(e){

　　　　e = e || window.event;

　　　　var target = e.target || e.srcElement;

　　　　console.log(target);

　　}

　　案例2：阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交

　　a.addEventListener('click',function(e){

　　　　e.preeventDefault(); //dom 标准写法

　　})

　　传统注册方式：

　　a.onclick = function( e ){

　　　　// 普通浏览器 e.preventDefault();  方法

　　　　// 低版本浏览器  ie678 returnValue  属性

　　　　// 也可以利用 return false  也能阻止默认行为  ，没有兼容性问题，特点：return 后面的代码不执行了，只限于 传统注册方式使用

　　　　return false;

　　　　alert(11);  //  return  后面的语句不再执行

　　}

　　案例3：阻止事件冒泡的两种方式

　　标准写法：利用事件对象里面的 stopPropagation（）方法

　　　e.stopPropagation();   // stop  停止  Propagation 传播

　　非标准写法：IE6 - 8 利用事件对象 cancelBubble 属性

　　　e.cancel Bubble = true ;   //  cancel  取消  bubble  泡泡

　　阻止事件冒泡的兼容性解决方案

　　if（e && e.stopPropagation ）{

　　　　e.stopProgation();

　　}else{

　　　　window .event .cancelBubble = true;

　　}