一 事件流:从页面中接收事件的顺序
1、事件冒泡
IE的事件流叫做事件冒泡;即事件开始时由最具体的元素接收、然后逐级向上传播到较不具体的节点。例如html页面:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件处理程序(或事件侦听器)</title>
</head>
<body>
<div>
<div id="myDiv">hello,你好。</div>
</div>
</body>
</html>
对应的javascript var btnDiv=document.getElementById("myDiv");
btnDiv.onclick=function(event){
alert("这是我点击的,哈哈");
//window.event.cancelBubble=true;//针对IE, 停止事件冒泡
event.stopPropagation();//非IE用的停止事件冒泡的方法
};
document.body.onclick=function(){
alert("Body clicked!!");
}
IE一般用window.event.cancelBubble=true 阻止事件冒泡
而非IE一般用event.stopPropagation()来阻止事件冒泡
运行这段js,会分别弹出"这是我点击的,哈哈" 和 "Body clicked!!" 这是由于事件冒泡引发的.
事件冒泡的顺序是:Element div----》Element body --》Element html --》Document
2、事件捕获
由Netscape Communicato提出的,捕获的顺序和IE的完全相反,即:
捕获的顺序为:Document--》Element html --》Element body--》Element div
3、DOM事件流
“DOM2”事件流包括三个阶段:事件捕获阶段,处于目标阶段、事件冒泡阶段。
即顺序为:Document--》Element html --》Element body--》Element div--》Element body --》Element html --》Document
Opera、Firefox、Chrome和Safari都支持DOM事件流;IE不支持DOM事件流
二 事件处理程序
事件是用户或者浏览器自身执行的某种动作、如:click,load等都是事件的名称;事件处理程序就是响应某个事件的函数。
1、 HTML事件处理程序 例如:
function showMessage(){
alert("hello world~!");
}
<input type="button" value="html事件处理程序" onclick="showMessage();" />
这种方式有两个缺陷:1、时差问题 2、html与javascript代码的紧密耦合
2、 DOM0级事件处理程序
这种方式至今仍然为所有现代浏览器所支持,一是由于简单、二是具有跨浏览器的优势。
这种方式就是将一个函数赋值给一个事件处理程序属性,也被称为是元素的方法,例如:
var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert(this.id+" hello,you already click me ~!");
}
btn.onclick=null;//即取消事件
这时候的事件处理程序师在元素的作用域中运行的。即:程序中的this引用当前元素。
3、 DOM2级事件处理程序
Firefox,Safari,Chrome,Opera都支持DOM2级事件处理程序,而IE不支持DOM2
DOM2级事件处理程序、定义了addEventListener()和removeEventListener()两个方法用于处理指定和删除事件的程序操作。
这两个方法都接受个参数,要处理的时间名称,作为事件处理程序的函数和一个布尔值。
布尔值为true、则表示在捕获阶段调用事件处理程序,如果为false,则在冒泡阶段调用事件处理程序。例如:
var btn=document.getElementById("myBtn2");
btn.addEventListener("click",function(){alert(this.id)},false);
btn.addEventListener("click",function(){alert("hello world~");},false);
//由于删除的时候要指定函数的名称,因此对于匿名函数无效,如下
btn.removeEventListener("click",function(){},false);//删除无效,因为为匿名函数
var btn=document.getElementById("myBtn2");
var handler=function(){alert("你好:"+this.id);};
btn.addEventListener("click",handler,false);
//取消
btn.removeEventListener("click",handler,false);//有效
4、 IE事件处理程序
IE事件处理程序,IE实现了与DOM中类型的两个方法:attachEvent()和detachEvent()
这两个方法都接受两个参数:事件处理程序的名称和事件处理程序的函数 使用attachEvent()方法、事件处理程序会在全局作用域中运行,即this等于window
例如:
var btnIE=document.getElementById("myBtnIE");
btnIE.attachEvent("onclick",function(){alert(this===window);});
btnIE.attachEvent("onclick",function(){alert("hello,this is second click");});
//IE事件处理程序也可以添加多个事件处理程序,但是这些事件处理程序师以相反的顺序被触发
//即上面的会先弹出"hello,this is second click",然后再弹出true
//使用attachEvent()添加的可以通过detachEvent()来移除,条件是必须提供相同的参数,因此添加的匿名函数也不可以移除
btnIE.detachEvent("onclick",function(){});//无效
5、跨浏览器的事件处理程序
由于DOM和IE中的Event对象不同,但是基于它们之间的相似性可以拿出跨浏览的方案来,例如:
//跨浏览器的事件处理程序
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;
}
},
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;
}
},
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.stopProgagation();
}else{
event.cancelBubble=true;
}
}
};
这些方法都封装在EventUtil对象中,例如:利用上述封装的方法,写一个跨浏览器的例子;
事件对象、DOM中的事件对象,如果需要一个函数处理多个函数,可用type属性
var btnType=document.getElementById("btnType");
var handler=function(event){
var eventType=EventUtil.getEvent(event).type;
switch(eventType){
case "click":
alert("Clicked");
break;
case "mouseover":
event= EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.style.backgroundColor="red";
break;
case "mouseout":
event= EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
target.style.backgroundColor="";
break;
}
};
btnType.onclick=handler;
btnType.onmouseover=handler;
btnType.onmouseout=handler;