JavaScript高级程序设计学习笔记--事件(二)(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)

事件对象    
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型,以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器对象都支持event对象,但支持方式不同。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event对象。来看下面的例子

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.type);     //"click"
};
btn.addEventListener("click",function(event){
    alert(event.type);     //"click"
},false);    

 

这两个例子中的两个事件处理程序都会弹出一个警告框,显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型。
在通过HTML特性指定事件处理程序时,变量event中保存着event对象。请看下面的例子:

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

Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都会有下表列出的成员。

属性/方法

类型

/

说明

bubbles

Boolean

只读

表明事件是否冒泡

cancelable

Boolean

只读

表明是否可以取消事件的默认行为

currentTarget

Element

只读

其事件处理程序当前正在处理事件的那个元素

Detail

Integer

只读

与事件相关的细节信息

eventPhase

Integer

只读

调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段

preventDefault()

Function

只读

取消事件的默认行为。如果cancelabletrue,则可以使用这个方法

stopPropagation()

Fucntion

只读

取消事件的进一步捕获或冒泡。如果bubblestrue,则可以使用这个方法

target

Element

只读

事件的目标

type

String

只读

被触发的事件的类型

View

AbstractView

只读

与事件关联的抽象视图。等同于发生事件的window对象



在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序制定为了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this);     // true
    alert(event.target === this)    //true
};

这个例子检测了currentTarget和target与this的值。由于click事件的目标就是按钮,因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中,那么这些值是不同的。

 

document.body.onclick = function(event){
    alert(event.currentTarget === document.body);  //true
    alert(this === document.body);   //true
    alert(event.target === document.getElementById("myBtn"))  //true
};

当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素上的。然而,target元素却等于按钮元素,因为它是click事件真正的目标。由于按钮上没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才得到了处理。

要阻止特定事件的默认行为,可以使用preventDefault()方法。例如链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果想要阻止链接导航这一默认行为,那么通过链接的onclick事件处理程序就可以取消它,如下面的例子

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

 

只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。另外stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用stopPropagation(),从而避免触发注册在document.body上面的事件处理程序,如下面的例子所示:

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick = function(event){
    alert("Body clicked");
};

对这个例子而言,如果不调用stopPropagation(),就会在单击按钮时出现两个警告框。可是由于click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的onclick事件处理程序。

事件对象的eventPhase属性,可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用事件处理程序eventPhase等于1,如果事件处理程序处于目标对象上,则eventPhase等于2,如果是在冒泡阶段调用的事件处理程序,eventPhase等于3。需要注意的是,尽管“处于目标”发生在冒泡阶段,但eventPhase仍然一直等于2。来看例子:

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase);   //2
};
document.body.addEventListener("click",function(event){
    alert(event.eventPhase);   //1
},true);
document.body.onclick = function(event){
    alert(event.eventPhase);   //3
};

当单击这个例子中的按钮时,首先执行的事件处理程序是在捕获阶段触发的添加到docuemnt.body中的那一个,结果会弹出一个警告框显示为eventPhase的1。接着,会触发在按钮上注册的事件处理程序,此时的eventPhase值为2,最后一个被触发的事件处理程序,是在冒泡阶段执行的添加到document.body上的那一个,显示eventPhase的值为3。而当eventPhase等于2时,this、target和currentTarget始终都是相等的。


只有在事件处理程序执行期间,event对象才会存在,一旦事件处理程序执行完成后,event对象就会被销毁。

IE中的事件对象

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

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    var event = window.event;
    alert(event.type);  //"click"
};

可是如果事件处理程序是使用attachEvent()添加的,那么就会有一个event对象作为参数被传入事件处理程序函数中,例如:

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(event){
    alert(event.type);  //"click"
});

在像这样使用attachEvent()的情况下,也可以通过window对象来访问event对象,就像使用DOM0级方法时一样。不过方便起见,同一个对象也会作为参数传递。
如果是通过HTML特性指定的事件处理程序,那么还可以通过一个名叫event的变量来访问event对象。

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

IE的event对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法,但所有事件对象都会包含下表所列的属性和方法。

属性/方法

类型

/

说明

cancelBubbles

Boolean

/

默认值为false,但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法的作用相同)

returnValue

Boolean

/

默认值为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同)

srcElement

Element

只读

事件的目标(与DOM中的target属性相同)

type

String

只读

被触发的事件的类型



因为事件处理程序的作用域是根据指定它的方式来确定的,所以不能认为this会始终等于事件目标。故而,最好还是使用event.srcElement比较保险。例如:

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(window.event.srcElement === this);  //true
};

btn.attachEvent("onclick",function(event){
    alert(event.srcElement === this);  //false
});

第一个事件处理程序中(使用DOM0级方法指定),srcElement属性等于this,但在第二个事件处理程序中this等于window,这两者的值不同。

跨浏览器的事件对象

虽然DOM和IE的event对象不同,但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE中的event对象的全部信息和方法DOM对象中都有,只不过实现方式不一样。不过,这种对应关系让实现两种事件模型之间的映射非常容易。

var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        } else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        } else {
            element["on"+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){
        if(element.removeEventListner){
            element.removeEventListner(type,handler,false);
        } else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        } else {
            element["on"+type] = null;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

 

posted @ 2013-03-15 17:18  木头小木头  阅读(764)  评论(1编辑  收藏  举报