南大软院大神养成计划——第十一天

今天是南大软院大神养成计划的第十一天，最近学习速度有点慢，主要是因为还参加了数学建模的比赛，所以不得不先把主要精力投入到数学建模比赛中，所以最近的博客都有点小水了。

今天学习的主要内容还是DOM事件探秘里的内容，感觉这部分的内容好多了，尤其是第四章的内容，加起来大约有100分钟了吧，所以准备明天看，今天就学习了一章的内容，今天主要学习了第三章——事件对象。

首先说说什么是事件对象，在触发dom对象的时候都会产生一个事件对象，这事件对象包含所有跟事件有关的信息，包括导致事件的元素，事件的类型还有跟事件特定的信息，比如键盘触发的事件对象会保存键盘输入的是什么键，比如a，b等，而鼠标则是移动或者点击等，这些都是通过事件对象event获取的。

先说说DOM中的事件对象，dom事件对象包含

(1)、type:获取事件类型

(2)、target：事件目标

(3)、stopPropagation() 阻止事件冒泡

(4)、preventDefault() 阻止事件的默认行为

IE的事件对象和DOM事件对象有点不一样，所以我们在编写事件对象的时候为了考虑兼容性要自己封装一个函数，用于获取事件对象里的信息。

IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement：事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=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]=null;

}

},

getEvent:function(event){

return event?event:window.event;

},//在一些低版本浏览器，不支持直接调用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;

}

}

}

这就是今天学习的内容，今天实在是太忙了，期待明天的学习.