1.首先，我们理解几个概念，比如“事件”、“事件流”、“事件名称”、“事件处理程序/事件监听程序函数”，这些概念可能是“老生常谈”，有认识的朋友可以交叉一下。事件：事件是用户自己或浏览器执行的特定行为。比如用户点击就是常用的点击事件流：多个事件按照一定的顺序触发，形成一个事件流。事件名称：如上所述，点击是事件名称。事件处理程序/事件监听器(Dom)是事件触发后的处理函数，如obj.onclick=fn函数fn是事件处理函数。2.让我们来看看历史。事件是dom的一部分，这在版本3中已经有了充分的解释。当你进入浏览器，除了ie(它有自己的事件模型)，其他的事件像网景、safari、opera基本都是遵循dom的事件模型。3.冒泡事件，其基本思想是从特定的事件目标到未指定的事件目标依次触发事件。先看下面的代码：代码复制代码如下： html head meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '/title no title page/title/head body onclick=' handle click()' div onclick=' handle click()' click me/div/body/html在ie5.5中，冒泡顺序如下。

在ie6.o之上添加了html(为了兼容，最后避免在这个标签上添加事件)，如图：。

Mozilla 1.0中的冒泡事件是：。

三种事件的顺序没有区别，只是有些标签是否支持冒泡有区别。4.我们来看看捕获事件ie4.0使用冒泡事件，而netscape navigator使用捕获事件，如下图所示：。

5.ie只支持冒泡事件，而dom同时支持冒泡事件和按照“捕获事件”->“冒泡事件”的顺序捕获事件。前面我们说过，Moz、Opera、Safari等浏览器基本都符合dom事件模型，所以也支持“冒泡事件和捕捉事件”，如下图：(。

6.下面我们了解怎样为标签添加事件，最常用的方法是在其标签里面添加如一下代码（这种添加，在蚊子中只有"捕获事件",等价于用addEventListener(obj，类型，false)添加的函数，这个后面再讲): 例如：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题无标题页/title/head body onclick=' alert(' body ')' div onclick=' alert(' div ')；'差异输入id=' Button 1 ' onclick=' alert(' BTN ')；'type=' button ' value=' button '/div/body/html点击按钮在工程师协会中，依据我们对上面的了解，很容易写出答案了，没错！工程师协会只有冒泡事件所以顺序为：buttondivbody而在非工程师协会浏览器如蚊子中正如我们上面所说的内嵌式事件等价于addEventlistener(类型，fn，false)只从捕获事件中监听。所以顺序刚好相反bodydivbody在addEventlistener(类型，fn，真添加事件时)只监听"捕获事件"当第三个参数为错误的时只监听冒泡事件我们看下面一个例子：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题无标题页/title style type=' text/CSS ' # ll { background : # f00；_width:表达式(这个宽200？200 px ' : true)；}/style/head body id=' obj 1 ' div id=' obj 2 ' input id=' obj 3 ' id=' Text1 ' type=' Text '/div脚本语言=' JavaScript '类型=' text/JavaScript ' var $=function(Eid){ Eid的返回类型==' object '？id :文档。getelementbyid(Eid)；};var fn={ fn 1: function(){ alert(' body ')；}，fn 2: function(){ alert(' div ')；}，fn 3: function(){ alert(' test ')；} };var et={ }；et.addEvent=function(obj，type，fn，flag){ if(obj。attachevent){ obj。attachevent(' on '类型，fn)；} else if(obj。addeventlistener){ flag=(标志的类型！='undefined ')？flag : treobj . addeventlistener(类型，fn，标志);} else { obj[' on ' type]=fn；} };et.addEvent($('obj1 ')，' click '，fn.fn1，true)；et.addEvent($('obj2 ')，' click '，fn.fn2，false)；et.addEvent($('obj3 ')，' click '，fn.fn3，true)；//et.addEvent($('obj3 ')，' click '，fn。fn3)；//et.addEvent($('obj2 ')，' click '，fn。fn2)；//et.addEvent($('obj1 ')，' click '，fn。fn1)；/脚本/正文/html点击文本域，猜一猜分别在工程师协会和moz(火狐)中的区别，当然在工程师协会中由于只监听冒泡事件所以很好判断执行顺序为：inputdivbody而在蚊子中由于差异在添加事件时第三个参数为错误的说明差异只监听冒泡事件，然后我们根据数字正射影像图的事件模型不难判断，先是ojb1obj3obj2分别弹出车身测试部门顺便唠叨一下：向同一个标签动态的添加事件是执行的顺序在工程师协会和其他非工程师协会内核的浏览器有所不同工程师协会是"先进先出"就是最先添加的最先执行，其他非工程师协会内核的浏览器是"先进后出",就是最后添加的事件先执行。