关于事件流在各个浏览器下触发顺序的讨论

最新推荐文章于 2022-10-05 10:55:01 发布

libmw

最新推荐文章于 2022-10-05 10:55:01 发布

阅读量175

点赞数

文章标签：浏览器 Chrome IE Opera HTML

大家都知道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 οnclick="this.innerHTML += 'div click=>';">触发顺序：</div>

我们发现三个浏览器的内联事件均在捕获之前触发：
触发顺序：window捕获=>document捕获=>html捕获=>body捕获=>div click=>div捕获=>div冒泡=>body click=>body冒泡=>html冒泡=>document冒泡=>window冒泡=>

但是当在body上添加内联事件时，情况发生了变化：
<body οnclick="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 οnclick="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冒泡=>

libmw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于事件流在各个浏览器下触发顺序的讨论

大家都知道dom的事件流顺序：先捕获，再冒泡，我写了个小测试(本文忽略ie浏览器，主要讨论标准dom事件流)测试环境：ff=>Firefox3.3.11opera=>Opera10.63chrome=>Chrome6.0(有点老了，平时用的ff)[code="html"]触发顺序：(function(){ //var divObj = documen...
复制链接

扫一扫