事件流描述的是从页面接受事件的顺序。但是IE和Netscape开发团队提出了完全相反的顺序，IE的事件流叫做事件冒泡。Netscape的事件流叫做事件捕获。
事件处理程序与事件对象
事件处理程序：响应事件的函数，就叫事件处理程序。
特点：事件处理程序名字以on开头，比如onclick、onload等。
为事件制定处理程序的方式：HTML、DOM0级、DOM2级
一、HTML事件处理程序
就是在HTML标签内部写入方法名。语法如下：
<input type="button" onclick="handleName()" value="button">
该方法在js文件中会产生一个局部变量event，也就是事件对象。
该方式的缺点：js与html耦合性高。也就意味着如果想改方法，就得改两个地方，一个是Html标签里面的方法名，一个是js文件里的方法。
二、DOM0级事件处理程序（最常见）
就是获取HTML里面的DOM，然后为这个DOM添加方法。语法如下：
var btn=document.getElementById("btn"); btn.onclick()=function(){ alert(this.id); }
优点：简单，就有跨浏览器优势。
特点：程序中的this是指向当前元素。
三、DOM2级事件处理程序（不常见）
添加事件处理程序：addEventListener()
删除事件处理程序：removeEventListener()
方法接受三个参数：事件名、事件函数、布尔值。
最后一个布尔值为false，代表事件将会在冒泡阶段进行捕获。
四、IE事件处理程序（不常见）
添加事件处理程序：attachEvent()
删除事件处理程序：detachEvent()
方法接受两个参数：事件名、事件函数。
五、跨浏览器的事件处理程序（常见，至于为什么，见下面的事件对象）
在EventUtil对象里面创建addHandler()方法，其对应的是removeHandle()方法。EventUtil对象就是用来存储自己写的事件处理方法。
addHander()方法，它的作用是根据情况，分别使用DOM0级、DOM2级或IE方法来添加事件。而我们用的这个EventUtil对象，它一般是我们永安里处理浏览器之间的差异。
事件对象只有两种，一种是DOM的事件对象，一种是IE的事件对象。
//跨浏览器为元素添加事件 var EventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ //DOM2级的方法为元素添加事件 element.addEventListener(element,handler,false); }else if(element.attachEvent){ //IE浏览器为元素添加事件 element.attachEvent("on"+type,handler); }else{ //DOM0级方法为元素添加事件 element['on'+submit]=handler; } }, }
下面的代码直接可以拿来当做模板用了。
//跨浏览器 var EventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){ //DOM2级事件,冒泡 element.addEventListener(type,handler,false); }else if(element.attachEvent){ //IE事件 element.attachEvent(type,handler); }else{ //DOM0级事件 element["on"+type]=handler; } }, //删除事件 removeHandler:function(element,type,handler){ if (element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent(type,handler) }else{ element["on"+type]=handler; } }, // 获取事件对象 getEvent:function(event){ return event?event:window.event; }, // 获取事件对象属性Target getTarget:function(event){ return event.target||event.srcElement; }, // 阻止事件发生 preventDefault:function(event){ if (event.preventDefault){ event.preventDefault; }else{ event.returnValue=false; } } }
-
事件对象
一、DOM中的事件对象event
其实我们在意的，并不是事件对象，而是事件对象里面的各种属性和方法，他包含了我们需要的信息。
常用的event属性与方法：（排名有先后）
currentTarget：事件处理程序当前正在处理事件的那个元素。
target：事件的目标。
type：通过一个函数处理不同事件的时候会用。
cancelable：是否可取消。
prevnentDefault()：与cancelable配套使用。
二、IE浏览器中的事件对象window.event
与DOM不同，当采用DOM0级方法为某个元素添加事件的时候，IE浏览器会将事件对象event作为window的属性返回。
（好讨厌IE浏览器啊，它为啥老是跟大众标准不一样？一点都不老实，感觉就跟上学时候的混混小太妹一样，老是闲着没事找事。好想打他。）
而且，IE浏览器中的事件对象event是没有target属性的，而是有srcElement属性。
三、跨浏览器的事件对象
现在，知道了IE浏览器的与众不同，所以明白上面的第五节，为什么会有跨浏览器的事件处理程序了吧。