js事件流:
事件流描述的是从页面中接受事件的顺序,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1,事件冒泡:事件最开始由最具体的元素(最深的那个节点)接收,然后逐级向上传播,到最不具体的那个节点。
2,事件捕获:不太具体的节点应该更早地接收到事件,而最具体的那个节点最后接收到事件。
大部分浏览器都支持事件冒泡
二、事件处理程序
1、HTML事件处理程序: 将事件处理绑定到HTML元素上,例如在button上写onclick="xxx()";
2、DOM0级事件处理程序:获取到元素,然后绑定事件,如a.onclick=xxx();
3、DOM2级事件处理程序
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都
接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序: 封装事件处理的方法兼容多个浏览器
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;
},
getType:function(event){
return event.type;
},
getElement: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;
}
}
}
事件对象event:
在事件处理程序中,可传入一个参数e,代表事件对象,老版本IE使用window.event来获取到事件对象
1,dom中的事件对象常用属性与方法
type属性,用于获取事件类型
target属性,用于获取事件的目标
stopPropagation()方法,用于阻止事件冒泡
preventDefault()方法,阻止事件的默认行为,例如阻止a标签的默认跳转行为
2,IE中的事件对象常用属性与方法
1,type用于获取事件类型
2,srcElement属性,用于获取事件的目标
3,cancleBubble属性设置为true,用于阻止事件冒泡
4,returnValue属性设置为false阻止事件的默认行为