浏览 2497 次
|
锁定老帖子 主题：关于事件流在各个浏览器下触发顺序的讨论
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-12-06
最后修改：2010-12-06
大家都知道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冒泡=> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-12-07
忽略了IE不好，国内基本都用的IE
|
| 返回顶楼 | |
|
发表时间：2010-12-07
xyztony1985 写道 忽略了IE不好，国内基本都用的IE
恩，说得也是，不过这里主要讨论从捕获到冒泡整个阶段的事件流，ie只有冒泡阶段所以不方便放一起讨论 |
| 返回顶楼 | |
