关于事件冒泡和捕获的问题

由于习惯于jquery的方便操作，往往让我们慢慢淡忘了原生js应有的功能和属性，今天重温一下事件冒泡和捕获问题。

冒泡：从内向外，如：div > body > html (不同浏览器稍有不同)

捕获：从外向内，如：html > body > div

 

阻止冒泡或捕获：e.stopPropagation() || e.cancelBubble = true;

 

例子，具体也可以随意修改予以测试：

 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>冒泡捕获</title>
		<link href="css/main.css"/>
		<style type="text/css">

		</style>
	</head>
	<body>
		<div id="container">
			<div id="level1" style="border:5px solid green;">
				<div id="level2" style="border:1px solid #ccc;margin:20px;">
					jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>
					jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>
				</div>
			</div>
		</div>
		<script>


		//标准浏览器，支持冒泡和捕获，ie91011
		document.addEventListener('click', function(e){
			console.log('document');
			e.stopPropagation();
		}, false); // 如果此处为true，则在从外向内捕获过程终止

		document.getElementById('level1').addEventListener('click', function(){
			console.log('level1');
		}, false);

		document.getElementById('level2').addEventListener('click', function(){
			console.log('level2');
		}, false);


		//<=ie8，只支持冒泡
		document.attachEvent('onclick', function(){
			console.log('document');
		});

		document.getElementById('level1').attachEvent('onclick', function(e){
			alert('level1');
			e.cancelBubble = true;
		});

		document.getElementById('level2').onclick = function(e){
			e = e || window.event;
			alert('level1');
			e.cancelBubble = true;
		};

		document.getElementById('level2').attachEvent('onclick', function(e){
			alert('level2');
			// e.cancelBubble = true;
		});
		
		</script>
	</body>
</html>

　　

 posted on 2014-03-27 17:08  jacklau  阅读(177)  评论(0)    收藏  举报