本节主要内容：
学习目标：
节数知识点要求
第一节 event对象关于event对象了解
event对象的使用了解
第二节 event中常用的属性和方法event中常用属性了解
event中常用的方法了解
第三节 ie中常用的属性和方法ie浏览器常用的属性和方法掌握
第四节 鼠标滚轮事件鼠标滚轮事件掌握
第五节 文档事件文档事件掌握
第六节 事件委托事件委托掌握
一、event对象
1.1关于event对象
概念： Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。
1.2 Event事件对象的使用
1.2.1直接通过event来获取
1.2.2 通过函数传参数的形式 还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或event】来代替。
1.document.querySelector("#d1").onclick = function(e){
console.log(e);
}; 2.document.querySelector("#d1").onmousemove = function(eve){
console.log(eve);
}
3.document.querySelector("#d1").onkeyup = function(){
console.log(event);
};
因为event对象是用来描述【发生的事件的信息】的，而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。
二．event中常用的属性和方法
2.1 event中常用的属性
因为event对象是用来描述【发生的事件的信息】的，而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。
2.1.1 type 属性
type属性用来获得【当前触发事件】的类型，此属性只读。
document.getElementById(“d1”).onclick = function () { console.log(event); console.log(event.type); //依赖于事件的触发而存在，只读属性 };
2.1.2 bubbles属性
bubbles属性用来获得【当前触发事件的类型】是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。
必须注意的是：bubbles属性指的是该事件是否冒泡。和事件处理机制无关！！！！
document.getElementById(“d1”).onclick = function () { console.log(event.bubbles); };
document.getElementById(“d1”).addEventListener('mouseenter',function (e) { console.log(e.bubbles); });
因为鼠标【点击事件】这个事件本身支持冒泡。
因此当存在点击事件被触发后，event对象的bubbles属性返回的就是true，表示当前事件支持冒泡。
2.1.3 eventPhase 属性
eventPhase：事件传导至【当前节点】时处于什么的状态。
1：事件处于捕获状态
2：事件处于真正的触发者
3：事件处于冒泡状态
d1.onclick = function (e) {console.log(this, e.eventPhase);}; d2.onclick = function (e) {console.log(this, e.eventPhase);}; document.onclick = function (e) {console.log(this, e.eventPhase);};
d1.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true); d2.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true); document.addEventListener('click', function (e) {console.log(this, e.eventPhase)}, true);
2.1.4 target 属性和 currentTarget 属性
target：返回事件真正的触发者
currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)
document.getElementById("d1").onclick = function (e) { console.log(e.target); console.log(e.currentTarget); };
2.1.5 button属性
button 返回当事件被触发时，哪个鼠标按钮被点击。
event.button=0|1|2
参数 描述
0 指定鼠标左键。
1 指定鼠标中键。
2 指定鼠标右键。
注意： Internet Explorer 8 及更早IE版本有不同的参数：
参数 描述
1 指定鼠标左键。 (IE8及更早IE版本)
4 指定鼠标中键。 (IE8及更早IE版本)
2 指定鼠标右键。
2.16 key和keyCode属性
key是哪个键
keyCode返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符(ASCII码值)；(firefox2不支持 event.keycode，可以用 event.which替代 )
2.1.7获取当前坐标的属性
clientX得到当前屏幕可视区域x坐标的值(不包含滚动条)
clientY得到当前屏幕可视区域y坐标的值(不包含滚动条)
screenX得到当前屏幕x坐标的值
screenY得到当前屏幕y坐标的值
pageX得到当前屏幕可视区域x坐标的值(包含滚动条)
pageY得到当前屏幕可视区域y坐标的值(包含滚动条)
2.2 event中常用的方法
stopPropgation()：阻止冒泡。
preventDefault()：默认阻止。
三、IE中的event对象的常用属性和方法
3.1 IE中的event对象的常用属性和方法
srcElement （target）属性：返回的是目标对象
cancelBubble 属性:取消冒泡
returnValue属性：默认阻止
3.3 兼容性问题
通过对IE下event的方法和非IE的方法的介绍，能够感觉到两种情况的很多属性和方法大致都相同，只不过会在某些特殊方法上面存在不同的兼容性写法。因此我们可以提出一些同时满足不同浏览器兼容性的写法。
属性的兼容性写法我们已经说过：
var target = eve.target || eve.srcElement;
var eve = eve || window.event
方法的兼容性写法我们也可以仿照这个来进行编写。思路如下：
(1)因为两种情况下的event对象获取方式并不同，所以希望能够自定义一个对象来替代event对象的使用。
(2)因为想要自定义对象在功能上和系统event对象的方法相同，所以需要给自定义对象添加方法
参考代码:
var Event = {
stop:function () { if(event.stopPropagation){ event.stopPropagation(); }else { event.cancelBubble = true; } }, quxiao:function () { if(event.preventDefault){ event.preventDefault(); }else { event.returnValue = false; } } };
四、鼠标滚轮事件
滚轮就是鼠标上的滚轮，它滚动的时候触发事件
4.1滚轮事件
onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。
event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：
鼠标往上滚， 120
鼠标往下滚， -120
4.2火狐浏览器滚轮事件
火狐浏览器不兼容，火狐使用自己的专用事件DOMMouseScroll ，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。
火狐添加的事件，是它自己的专门事件DOMMouseScroll，
表示滚动方向的事件的属性叫做event.detail。
detail就是细节的意思。反着的，滚动方向往上，-3；滚动方向往下，3。
4.3 封装浏览器兼容性
五、文档事件
(1) 加载成功\失败事件：load\error
load事件指的是：节点加载成功时自动发生回调事件
error事件值得是：节点加载失败时自动发生的回调事件
(2) 当DOM加载完成时触发事件：DOMContentLoaded
DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。
DOM文档加载的步骤为: 解析HTML结构。 加载外部脚本和样式表文件。 解析并执行脚本代码。 DOM树构建完成。 //DOMContentLoaded执行 加载图片等外部文件。 页面加载完毕。 //load执行
(3) 文档加载状态判断事件：readystatechange
众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值：
loading：加载DOM中
interactive：加载外部资源
complete：加载完成
而readystatechange事件正是在这个状态发生改变时调用的事件。
六、Event案例
6.1 二级联动
6.2 三级联动
6.3 放大镜案例
七、事件委托
7.1 什么是事件委托
事件委托/事件代理：事件委托就是利用【事件冒泡】，自己本身做不了这个事，让让上一级来做这个事，只指定一个事件处理程序，就可以管理某一类型的所有事件。