Javascript事件冒泡和捕捉的阻止

<!DOCTYPE html>
<html>
<head>
<title>捕捉和冒泡</title>
<meta charset="utf-8">
</head>
<body>
<style>
 
#china{
width:500px;
height: 500px;
}
div{
border: 1px solid #333;
width:80%;
height: 80%;
margin: 10%;
}
 
</style>
 
 
<div id="china">
我是中国区域
<div id="shanxi">
 我是陕西区域
<div id="xian">
我是西安区域
 
 
</div>
</div>
</div>
 
 
<script>
//获取中国,陕西,西安三大对象
var china =document.getElementById('china');
var shanxi=document.getElementById('shanxi'); 
var xian  =document.getElementById('xian'); 
 
//第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是捕捉模式】
// china.addEventListener('click',function(){console.log('China')},true);
// shanxi.addEventListener('click',function(){console.log('Shanxi')},true); 
// xian.addEventListener('click',function(){console.log('Xian')},true); 
 
 
 
//第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是冒泡模式】
china.addEventListener('click',function(){console.log('China')},false);
shanxi.addEventListener('click',function(ev){
console.log('Shanxi');
ev.stopPropagation();
},false);
xian.addEventListener('click',function(){console.log('Xian')},false); 
 
 
</script>
 
 
 
</body>
</html>

【主要方法】:stopPropagation()