学习目标：
节数知识点要求第一节 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：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)
<div id="d1">d1 <div id="d2">d2</div> </div>
? 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。