1.事件冒泡
2.事件捕获
事件处理程序
1.HTML事件处理程序
2.DOM 0级事件处理程序
3.DOM 2级事件处理程序 addEventListener(),removeEventListener()
4.IE事件处理程序 attachEvevnt() detachEvent()
DOM中的事件对象
1.DOM中的事件对象
（1）type属性 获取事件的类型
（2）target属性 用于获取事件的目标
（3）stopPropagation() 阻止事件冒泡
（4）preventDefault() 阻止事件的默认行为
2.IE中的事件对象
（1）type属性 用于获取事件的类型
（2）srcElement属性 用于获取事件的目标
（3）cancelBubble属性 阻止事件冒泡 设置为true表示阻止冒泡，设置为false表示不阻止冒泡
（4) rutrunValue属性 设置为false表示阻止事件的默认行为
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] = handler;
}
},
//事件对象
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;
}
}
}
网友评论