大家都知道dom的事件流顺序：先捕获，再冒泡，我写了个小测试(本文忽略ie浏览器，主要讨论标准dom事件流)
测试环境：
ff=>Firefox3.3.11
opera=>Opera10.63
chrome=>Chrome6.0(有点老了，平时用的ff)
<html>
<body>
<div>触发顺序：</div>
</body>
<script type="text/javascript">
(function(){
//var divObj = document.getElementsByTagName('div').item(0);
function addClickEvent(o, msg, isCapture){
o.addEventListener('click', (function(){return function(e){document.getElementsByTagName('div').item(0).innerHTML += msg + '=>';}})(), isCapture);
}
addClickEvent(window, 'window捕获', true);
addClickEvent(document, 'document捕获', true);
addClickEvent(document.getElementsByTagName('html').item(0), 'html捕获', true);
addClickEvent(document.body, 'body捕获', true);
addClickEvent(document.getElementsByTagName('div').item(0), 'div捕获', true);
addClickEvent(document.getElementsByTagName('div').item(0), 'div冒泡', false);
addClickEvent(document.body, 'body冒泡', false);
addClickEvent(document.getElementsByTagName('html').item(0), 'html冒泡', false);
addClickEvent(document, 'document冒泡', false);
addClickEvent(window, 'window冒泡', false);
})();
</script>
</html>
在ff,chrome,opera下点击层上的文字“触发顺序：”测试结果均一致
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div捕获=>div冒泡=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>
在chrome下点击空白区域可以触发body上的事件(当然强大的'ie'也能触发到body上的事件)
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>
而在ff,opera下点击空白区域则不会触发body上的事件
触发顺序：window捕获=>document捕获=>html捕获=>html冒泡=>document冒泡=>window冒泡=>
现在我们再来看看内联事件在哪儿被触发，在div上加一个onclick：
<div onclick="this.innerHTML += 'div click=>';">触发顺序：</div>
我们发现三个浏览器的内联事件均在捕获之前触发：
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div click=>div捕获=>div冒泡=>body click=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>
但是当在body上添加内联事件时，情况发生了变化：
<body onclick="document.getElementsByTagName('div').item(0).innerHTML += 'body click=>';">
ff下把body的内联事件被单独添加到document冒泡和window冒泡之间
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div捕获=> div冒泡=>body冒泡=>html冒泡=>document冒泡=>body click=>window冒泡=>
opera，chrome把body的内联事件放到body冒泡阶段之前
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div捕获=>div冒泡=>body click=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>
但是chrome下点击空白区域body的内联事件又变换了位置，回到了捕获之前
触发顺序：window捕获=>document捕获=>html捕获=>body click=>body捕获=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>
那html的内联事件呢？
<html onclick="document.getElementsByTagName('div').item(0).innerHTML += 'html click=>';">
我们发现三个浏览器的html内联事件均在冒泡之前触发(点击文本)
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div捕获=>div冒泡=>body冒泡=>html click=>html冒泡=>document冒泡=>window冒泡=>
但是当我们点击空白区域情况又变了
ff和opera跑到了捕获之前触发：
触发顺序：window捕获=>document捕获=>html click=>html捕获=>html冒泡=>document冒泡=>window冒泡=>
chrome不变：
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>body冒泡=>html click=>html冒泡=>document冒泡=>window冒泡=>
分享到：
相关推荐
如：用户点击 也就是常用的click事件 事件流：多个事件 按一定顺序触发 形成了事件流 事件名称：如上面所讲的click就是事件名 事件处理函数/事件监听函数（Dom的叫法）就是 事件触发后的处理函数，如obj.onclick=fn;...
而这一个或多个元素响应事件发生的先后顺序在各个浏览器（主要针对IE和Netscape）上是不同的。 冒泡型事件（Dubbed Bubbling） IE上的解决方案就是冒泡型事件（Dubbed Bubbling）。冒泡型事件的基本思想是，事件按照...
JavaScript中事件冒泡机制示例详析 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 ... dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件
1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递 Event 常见属性： clientX clinetY 鼠标相对客户端的位置 ...
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
自定义组合按键触发事件，可自定义按键包括个数，理论支持全键盘同事按下触发，兼容所有浏览器，提醒：组合按键，按的时候没有先后顺序区别，只要全按对，如果有按错键的情况，必须松开键盘重新按，只支持一次性全按...
keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键...
事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：...
时间流— 描述的是从页面中接受事件的顺序。 （1）事件冒泡流。 事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 （2）事件捕获流。 不太具体的...
一个流还可以用作其他流中的动作，在这种情况下，它是一个子流，其中流结束事件映射到状态完成事件。 意图 状态流的意图是提供一种实现高级流程的方法，使用流/状态机作为编程语言通常会比原始实现更趋于复杂的图形...
在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,
A 事件流（event flow ） 事件模型分为两种：冒泡型事件、捕获型事件。 冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型（event capturing ）事件：它与冒泡型...
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先出发click事件还是外层先触发？目前主要有三种模型 IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上...
事件流就是事件发生顺序，这是IE和其他浏览器在事件支持上的主要差别。 一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定的事件目标（document对象）的顺序触发。 ...
最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先执行默认行为，再执行绑定的事件行为，有时候可能是相反的顺序。于是上网查找了下资料，还真有个外国哥们和我遇到同一个问题！整理下...
很明显，下载顺序从上到下，文档流中先出现的资源先下载。在 IE8, Safari, Chrome 等浏览器下也类似。 Firefox 对下载顺序做了优化：Firefox 会将 js, css 提前下载，而将图片等资源延迟到后面下载。 对于渲染，利用...
attachEvent 将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。 clear 目前尚未支持。 close 关闭输出流并强制将数据发送到显示。 createAttribute 以指定名称创建 attribute 对象。 ...
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行，浏览器对于不同的方式有不同的解析顺序，详细介绍如下，感兴趣的朋友可以参考下哈
SWFUpload不同于其他基于Flash构建的上传工具，它有着优雅的代码设计，开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的JavaScript事件，借助它们开发者可以方便的...