求教，js事件的冒泡和阻止是怎样的？

[hellowindowns]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<style type="text/css">
.div1{
padding: 10px 10px;
background: red;
}
.div2{
padding: 10px 10px;
background: gray;
}
</style>
<body>
<!--
test 1
-->
<div class="div1">
<input class="aa1" type="button" value="aa1" />
<input class="aa2" type="radio" name="testRadio" />
<button class="aa3 aa1">aa3</button>
</div>
<!--
test 2
-->
<div class="div2">
<input class="aa1 cc1" type="button" value="test2" />
</div>
<script type="text/javascript">
//test1
$(".div1").click(function(){
console.log("div1");
});
$(".aa1").click(function(){
console.log("aa1");
});
$(".aa2").click(function(){
console.log("aa2");
});
$(".aa3").click(function(){
console.log("aa3");
});

//test2
$(".bb1").click(function(){
console.log("bb1");
});

$(".cc1").click(function(e){
console.log("cc1");
});
/*
第一、我想单击$(".div1")可以触发$(".aa1")，$(".aa2")，$(".aa3")的事件，怎样做

第二、我单击， $(".cc1") 触发$(".cc1")，不让$(".aa1")触发 怎样做？

第三、我不懂事件的冒泡和阻扯是怎样的流动的。各位麻烦告知，有无这方边的书介绍？？谢谢。
*/
</script>
</body>
</html>

[天际的海浪]

/* 第一、我想单击$(".div1")可以触发$(".aa1")，$(".aa2")，$(".aa3")的事件，怎样做 本来就这样的啊 第二、我单击， $(".cc1") 触发$(".cc1")，不让$(".aa1")触发 怎样做？ $(".cc1").click(function(e){//cc1的事件要在aa1前面设置，要让cc1的事件先触发才能阻止后面的 e.stopImmediatePropagation(); console.log("cc1"); }); $(".aa1").click(function(){ console.log("aa1"); });

[天际的海浪]

第三、我不懂事件的冒泡和阻扯是怎样的流动的。各位麻烦告知，有无这方边的书介绍？？谢谢。 http://www.jb51.net/article/48935.htm

[hellowindowns]

引用 2 楼 jslang 的回复:

第三、我不懂事件的冒泡和阻扯是怎样的流动的。各位麻烦告知，有无这方边的书介绍？？谢谢。 http://www.jb51.net/article/48935.htm

谢谢！