12.1 事件流
事件流描述的是从页面接收事件的顺序。
IE的事件流是事件冒泡流;
Netscape的事件流是事件捕获流。
12.1.1 事件冒泡
所有现代浏览器都支持事件冒泡。
12.1.2 事件捕获
12.1.3 DOM事件流
DOM2级事件规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
12.2 事件处理程序(或事件侦听器)
响应某个事件的函数就叫做事件处理程序(或事件侦听器)
12.2.1 HTML事件处理程序
<sctipt type="text/javascript">
Function showMessage(){
Alert("hello world");
}
</script>
<input type="button" value="Click me"οnclick="showMessage()"/>
<input type="button" value="Click me"οnclick="try{showMessage()}catch(ex){}"/>
12.2.2 DOM0级事件处理程序
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行;程序中的this引用当前元素。
varbtn=document.getElementById("myBtn");
Btn.οnclick=function(){
Alert(this.id);// 可通过this访问元素的任何属性和方法
};
btn.οnclick=null;//删除事件处理程序
12.2.3 DOM2级事件处理程序
定义了两个方法:addEventListener()和removeEventListener().所有Dom节点都包含这两个方法,接受3个参数:事件名、事件处理程序和一个布尔值,为true表示在捕获阶段调用事件处理程序;为false表示在冒泡阶段调用事件处理程序。
varbtn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
Alert(this.id);//元素作用域
},false);
//可在添加一个,将按顺序执行
var handler=function(){
Alert("Hello world");
};
btn.addEventListener("click",handler,false);
//移除函数处理程序
Btn.removeEventListener("click",handler,false);
12.2.4 IE事件处理程序
定义了与DOM类似方法:attachEvent()和detachEvent();接受两个参数:事件处理程序名称与事件处理程序函数。IE只支持事件冒泡。
varbtn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){//注:此处为onclick
Alert(this===window);//作用域不同,全局作用域运行
});
//可在添加一个,将按反序执行
var handler=function(){
Alert("Hello world");
};
btn.attachEvent("onclick",handler);
//移除函数处理程序
Btn.detachEvent("click",handler);
12.2.5 跨浏览器的事件处理程序
VarEventUtil={
addHandler:function(element,type,handler){
If(element.addEventListener){
Element.addEventListener(type,handler,false);
}else if(element.attachment){
Element.attachEvent("on"+type,handler);
}else{
Element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
If(element.removeEventListener){
Element.removeEventListener(type,handler,false);
}else if(element.detachment){
Element.detachEvent("on"+type,handler);
}else{
Element["on"+type]=handler;
}
}
};
12.3 事件对象
在出发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件类型等。所有浏览器都支持event对象。
12.3.1 DOM中的事件对象
varbtn=document.getElementById("myBtn");
Btn.οnclick=function(event){
Alert(event.type);//click
};
Btn.addEventListener("click",function(event){
Alert(event.type);//click
});
事件成员列表:
12.3.2 IE事件对象
12.3.3 跨浏览器的事件对象
varEventUtil={
addHandler:function(element,type,handler){
If(element.addEventListener){
Element.addEventListener(type,handler,false);
}else if(element.attachment){
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.removeEventListener){
Element.removeEventListener(type,handler,false);
}else if(element.detachment){
Element.detachEvent("on"+type,handler);
}else{
Element["on"+type]=handler;
}
},
stopPropagation:function(event){
If(event.stopPropagation){
Event.stopPropagation();
}else{
Event.cancelBubble=true;
}
}
};
//调用
Btn.οnclick=function(event){
event=EventUtil.getEvent(event);
Var target=EventUtil.getTarget(event);
};
12.4事件类型
12.4.2 鼠标事件
Vardiv=document.getElementById("myDiv");
EventUtil.addHander(div,"click",function(event){
Enent=EventUtil.getEvent(event);
Alert(event.clientX+","+event.clientY);客户端坐标:
Alert(event.screenX+","+event.screenY);屏幕坐标:
});
判断是否同时按下了其中的键:
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
Var keys=new Array();
If(event.shiftKey){
Keys.push("shift");
}
if(event.ctrlKey){
keys.push("ctrl");
}
if(event.altKey){
keys.push("alt");
}
if(event.metaKey){
keys.push("meta");
}
Alert("keys:"+keys.join(","));
});
添加相关元素:
varEventUtil={
addHandler:function(element,type,handler){
If(element.addEventListener){
Element.addEventListener(type,handler,false);
}else if(element.attachment){
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.removeEventListener){
Element.removeEventListener(type,handler,false);
}else if(element.detachment){
Element.detachEvent("on"+type,handler);
}else{
Element["on"+type]=handler;
}
},
stopPropagation:function(event){
If(event.stopPropagation){
Event.stopPropagation();
}else{
Event.cancelBubble=true;
}
},
getRelatedTarget:function(event){//获取相关元素
If(event.relatedTarget){
Return event.relatedTarget;
}else if(event.toElement){
Return event.toElement;
}else if(event.fromElement){
Return event.fromElement;
}else{
Return null;
}
},
getButton:function(event){//鼠标按钮
If(document.implementation.hasFeature("MouseEvents","2.0")){
Return event.button;
}else{
Switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
Return 0;
case 2:
case 6:
Return 2;
case 4:
Return 1;}
}
},
getCharCode:function(event){
If(typeof event.charCode=="number"){
Return event.charCode;
}else{
Return event.keyCode;//键码
}
}
};
12.4.3键盘事件
12.4.4 HTML事件
EventUtil.addHandler(window,"unload/load/resize/scroll",function(event){
Alert("load");
});