JavaScript高级程序设计42.pdf

IE中的事件对象

要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在

wondow.event.type　　//IE中的type属性与DOM的type属性相同

在使用attachEvent()添加事件处理程序时，会有一个event对象作为参数被传入到事件处理程序函数中

btn.attachEvent("onclick",function(event){

　　　　alert(event.type);　　//"click"

　　　　});

通过HTML特性指定的事件处理程序，还可以通过event变量来访问event对象

<input type="button" value="Click Me" onclick="alert(event.type)">

IE中的event对象同样包含于创建它的事件相关的属性和方法，与DOM一样，这些属性和方法也会因为事件类型的不同而不同，但所有的事件对象都包含下列属性和方法

cancelBubble　　布尔值　　读/写　　默认为false，但将其设置为true就可以取消事件冒泡

returnValue　　布尔值　　读/写　　默认为true，但将其设置为false就可以取消事件的默认行为

srcElement　　元素　　只读　　事件的目标

type　　字符串　　只读　　被触发的事件的类型

因为事件处理程序的作用域是根据指定它的方式来确定的，this不会始终等于事件目标，可以使用event.srcElement，比如

btn.onclick=function(){

　　　　alert(window.event.srcElement===this);　　//true

　　　　};

btn.attachEvent("onclick",function(event){

　　　　alert(event.srcElement===this);　　//false

　　　　});

取消默认行为(与DOM不同的是，没有方法确定事件能否被取消)

link.onclick=function(){

　　　　window.event.returnValue=false;

　　　　};

取消事件冒泡，下面例子只显示一次警告框

btn.onclick=function(){

　　　　alert("Clicked");

　　　　window.event.cancelBubble=true;

　　　　};

document.body.onclick=function(){

　　　　alert("Body clicked");

　　　　};

跨浏览器的事件对象

var EventUtil={

　　addHandler:function(element,type,handler){

　　　　　　//省略的代码

　　　　　　},

　　getEvent:function(event){

　　　　　　return event? event:window.event;

　　　　　　},

　　getTarget:function(event){

　　　　　　return event.target|event.srcElement;

　　　　　　},

　　preventDefault:function(event){

　　　　　　if(event.preventDefault){

　　　　　　　　event.preventDefault();

　　　　　　　　}else{

　　　　　　　　event.returnValue=false;

　　　　　　　　}

　　　　　　},

　　removeHandler:function(element,type,handler){

　　　　　　//省略的代码

　　　　　　},

　　stopPropagation:function(event){

　　　　　　if(event.stopPropagation){

　　　　　　　　event.stopPropagation();

　　　　　　　　}else{

　　　　　　　　event.cancelBubble=true;

　　　　　　　　}

　　　　　　}

　　};

可以这样使用

event=EventUtil.getEvent(event);　　//取得event变量或者属性

EventUtil.stopPropagation(event);　　//传入event调用方法