1 事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包含导致事件的元素,事件的类型以及其他与特定事件相关的信息。所有浏览器都支持event对象,但支持方式不同。
1.1 DOM中的事件对象
兼容DOM的浏览器会讲一个event对象传入到事件处理程序中。无论指定事件处理程序是使用什么方法(DOM0或DOM2级),都会传入event对象。event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。所有事件都会有下表列出的成员:
只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。
1.2 IE中的事件对象
与访问DOM中的event对象不同,要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。
(1)在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
var event = window.event;
alert(event.type); //“click”
};
(2)使用attachEvent()添加事件处理程序,那么就会有一个event对象作为参数被传入事件处理程序函数中。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
alert(event.type); //"click"
});
(3)通过HTML特性指定的事件处理程序,可以通过一个叫event的变量来访问event对象(与DOM中的事件模型相同)。
<input type="button" value="Click Me" onclick="alert(event.type)" >
IE的event对象都会包含下列的属性和方法
由于IE不支持事件捕获,因而只能取消事件冒泡。
因为事件处理程序的作用域是根据指定它的方式来确定的,所以不能认为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级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。
1.3 跨浏览器的事件对象
虽然DOM和IE中的event对象不同,但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。
<script type="text/javascript">
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;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
var btn = document.getElementById("btn");
var handler = function (event) {
alert("Clicked");
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
EventUtil.preventDefault(event);
EventUtil.stopPropagation(event);
}
EventUtil.addHandler(btn, "click", handler);
document.body.onclick = function (event) {
alert("Body clicked");
};
</script>