JS中事件流测试_js流式请求测试-CSDN博客

本文链接：https://blog.csdn.net/huihuijor/article/details/8621829

以下是一段用于测试两种事件流的类型：捕获（capture）和冒泡（bubble），如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

	document.onreadystatechange = function () {   
	    if(document.readyState=="complete") {          
	         var inner = document.getElementById('inner');
	         var banner = document.getElementById('banner');
	         if(inner.addEventListener){
		         inner.addEventListener('click',function(){
					alert(1.1);
			     },true);
		         banner.addEventListener('click',function(){
					alert(2.1);
				 },true);
		         document.body.addEventListener('click',function(){
					alert(3.1);
				 },true);
		     }else if(inner.attachEvent){
		    	 inner.attachEvent('onclick',function(){
						alert(1.1);
				     });	
			 }
	     }   
	}   
	
	clickHandlerOnBody = function(){
		alert(3);
	}
	clickHandlerOnDiv = function(){
		alert(2);
	}
	clickHandlerOnInner = function(){
		alert(1);
	}
</script>
<title>Demo System</title>
</head>
<body id="body" οnclick="clickHandlerOnBody()">
	body
	<div id='banner' style="width:100px;height:100px;background-color:red;" 
	οnclick="clickHandlerOnDiv()">
		banner
		<div id='inner' style="width:50px;height:50px;background-color:yellow;" 
				οnclick="clickHandlerOnInner()">inner</div>
	</div>
	
</body>
</html>

点击inner输出的firefox下输出的结果是：

3.1

2.1

1.1

而不是：

3.1

2.1

1.1

原因是什么？

另外，不知道两种捕获类事件流的具体使用场景，stackoverflow上的回答也只是说为了兼容IE，一般都是bubble事件流。