JS中事件流测试

以下是一段用于测试两种事件流的类型:捕获(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.1

2

3

而不是:

3.1

2.1

1.1

1

2

3

原因是什么?

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值