## 13.3 事件对象 在触发DOM上都某个事件时，会产生一个事件对象event，这个对象包含这所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。 ### 13.3.1 DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0/DOM2），都会传入event对象。 * 只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。 event对象包含与创建它的特定事件有关的属性和方法，触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都有下列属性和方法： |属性/方法|类型|读/写|说明| |---|---|---|---| | bubbles | 布尔值 | 只读 | 表示事件是否冒泡 | | cancelable |布尔值| 只读 | 表示是否可以取消事件的默认行为 | | currentTarget | Element类型 | 只读 | 其事件处理程序当前正在处理事件的那个元素 | | defaultPrevented | 布尔值 | 只读 | 为true时表示已经调用了preventDefault()，DOM3新增 | | detail| Integer类型 | 只读 | 与事件相关的细节信息 | | eventPhase| Integer类型 | 只读 | 调用事件处理程序的阶段：1表示捕获阶段，2表示目标阶段，3表示冒泡阶段 | | preventDefault() | Function类型 | 只读 | 取消事件的默认行为 | | stopImmediatePropagation() | Function类型 | 只读 | 取消事件的进一步捕获或冒泡，同时组织任何事件处理程序被调用 | | stopPropagation()| Function类型 | 只读 | 取消事件的进一步捕获或冒泡 | | target | Element | 只读 | 事件的目标 | | trusted| 布尔值 | 只读 | 为true时表示事件是浏览器生成的，为false时表示事件是开发人员创建的 | | type | String类型 | 只读 | 事件类型 | | view| AbstractView | 只读 | 与事件关联的抽象视图，等同于发生事件的window对象 | * 在事件处理程序内部，对象this始终等于currentTarget的值，而target则包含事件的实际目标。 ~~~ document.body.onclick = function(event){ alert(event.curentTarget === document.body); //true alert(this === document.body); //true alert(event.target === document.getElementById("myBtn")); //true ~~~ * 只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。 ### 13.3.2 IE中的事件对象 在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。 IE的event对象同样也包含于创建它的事件相关的属性和方法。 |属性/方法|类型|读/写|说明| |---|---|---|---| | cancelBubble | 布尔值 | 读/写 | 默认值为false，将其设置为true时，作用和DOM中的stoPropagation()方法一样 | | returnValue |布尔值| 读/写 | 默认为true，将其设为false时，作用和DOM中的preventDefault()方法的作用一样。 | | srcElement | Element类型 | 只读 | 事件的目标（与DOM中的target属性相同） | | defaultPrevented | 布尔值 | 只读 | 被触发的事件的类型 | ### 13.3.3 跨浏览器的事件对象 ~~~ var EventUtil = { addHandler: function(element, type, handler, useCapture) { // 省略代码 }, removeHandler: function(element, type, handler, useCapture) { // 省略代码 }, getEvent: function(event){ return event || window.event; }, getTarget: function(evetn){ return event.target || event.srcElement; }, preventDefault: function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation: function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }; //调用 div.onclick = function(event){ event = EventUtil.getEvent(event); target = EventUtil.getTarget(); EventUtil.preventDefault(); EventUtil.stopPropagation(); } ~~~