十二、事件(js笔记)

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");

});