大家都知道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;...
事件捕获是从最外层元素到最内层元素的顺序触发事件，这使得父级元素有机会在子元素之前处理事件。 2. **cBrowserEvents类**：这个类文件可能是用于封装和处理与浏览器相关的事件，如点击、加载、鼠标移动等。它...
通过测试和实验，作者发现IE、Chrome、360以及Firefox浏览器在关闭和刷新时所触发的事件顺序和时机有所不同。总体来说，可以通过检测事件触发的顺序以及特定的浏览器特性来确定用户的行为。 在实际代码中，作者提出...
值得注意的是，在DOM浏览器中，文本节点也会触发事件，这在IE中是不会发生的。 为事件指定处理函数，有两种常见的方法：一是通过JavaScript动态绑定，二是直接在HTML标签内使用`onclick`属性。例如： ```...
在探索跨浏览器的事件系统时，首先需要理解事件驱动编程的重要性以及JavaScript的事件模型。事件驱动编程是一种编程范式，在这种范式中，程序的流程由事件控制，例如用户与网页的交互动作、窗口行为、定时器到期等。...
在Asp.net开发中，经常需要处理用户在文本框（`TextBox`）内的输入操作，特别是在用户按下回车键时触发某些特定的操作，比如提交表单或者执行搜索功能等。本文将详细介绍如何在Asp.net中实现TextBox回车触发事件。 ...
自定义组合按键触发事件，可自定义按键包括个数，理论支持全键盘同事按下触发，兼容所有浏览器，提醒：组合按键，按的时候没有先后顺序区别，只要全按对，如果有按错键的情况，必须松开键盘重新按，只支持一次性全按...
在JavaScript的世界里，拖动排序（Drag and Drop Sorting）是一种常见的交互设计，它允许用户通过鼠标拖曳元素来改变它们的顺序，就像浏览器的书签栏那样。这种效果可以极大地提升用户体验，使得用户能直观地调整...
事件循环处理机制的执行顺序为：先执行一个宏任务，然后检查微任务队列是否存在任务，如果存在，则执行微任务队列中的任务，如果不存在，则重新渲染开始下一次循环。 为分析宏任务setTimeout、XMLHttpRequest和UI...
在CocosCreator中，事件系统是游戏开发中的关键部分，它允许开发者响应用户交互和管理游戏状态。本文将深入解析CocosCreator系统事件的产生和触发机制，主要涉及的源文件有`CCGame.js`, `CCInputManager.js`, `...
客户端事件发生在用户的浏览器中，无需与服务器进行通信。它主要用于处理用户界面的即时反馈，例如修改组件状态、执行JavaScript动画、页面跳转或防止表单重复提交。在ASP.NET中，可以通过`OnClientClick`属性设置...
这样，无论用户使用哪种浏览器，当他们在文本框中按下回车键时，都会触发`soJS()`函数，实现跨浏览器的兼容性。 最后，文章提到了其他相关的话题，如ASP.NET中启动线程、页面生命周期、自定义委托和事件参数、页面...
这个模块专注于检测浏览器滚动条是否已经到达页面底部，从而触发特定的事件或功能。 滚动触底（Scroll Bottom）事件是一种常见的网页交互事件，它允许开发者在用户滚动到页面的最底部时执行某些操作，如加载更多...
本篇文章将深入探讨JavaScript在不同浏览器环境下，尤其是IE浏览器中，如何处理多事件绑定的执行顺序。 在W3C的标准下，推荐使用`addEventListener`方法来绑定事件，它的特点是事件处理函数按照添加的顺序依次执行...
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
在使用这些方法时，需要注意的是，按照添加事件监听器的顺序来触发监听器的顺序并不总是相同的，特别是在不同的浏览器中。 在实际开发中，为了最大范围地兼容各种浏览器，开发者通常将事件监听器添加到事件冒泡阶段...
例如，浏览器的开发者工具提供了事件监听器的可视化界面，可以看到事件传播路径和触发顺序。这在调试复杂交互逻辑时非常有用。 文件名"2.jsp"可能代表了一个包含事件处理的JSP（JavaServer Pages）文件，JSP是Java...