PS：這里是我從別人的博客中學習事件捕獲和冒泡是的總結，如果你也感興趣的話，建議你點擊鏈接查看原博客的內容，他們寫的都是很經典！
??
???? 對“捕獲”和“冒泡”這兩個概念，我想我們對冒泡更熟悉一些，因為在我們使用的所有瀏覽器中，都支持事件冒泡 ，即事件由子元素向祖先元素傳播的，就 像氣泡從水底向水面上浮一樣。而在像firefox,chrome,safari這類所謂的標準瀏覽器中，事件傳播還有個階段，那就是捕獲階段，這個很少 有用武之地，所以被人疏忽遺忘也在所難免了，不常用不代表它不存在，本著科學嚴謹的態度，我們有必要去看一下它的廬山真面目。
事件捕獲
事實上，捕獲階段是一個和冒泡階段完全相反的過程，即事件由祖先元素向子元素傳播，和一個石子兒從水面向水底下沉一樣，要說明的是在 IE，opera瀏覽器中，是不存在這個階段的。從各瀏覽器提供的注冊事件監聽的方法中可見一斑，例如適用于ie,opera的attachEvent， 有兩個參數，attachEvent(”on”+type,fn)，而適用于所謂標準瀏覽器的addEventListener則有三個參 數，addEventListener(type,fn,boolean)，前面兩個參數不用解釋，第三個參數boolean，就是決定注冊事件發生在捕 獲階段還是冒泡階段，具體參考如下：
true : 捕獲階段
false : 冒泡階段
<html>
<head>
<title>
</title>
<style type="text/css">
*{margin:0px;padding:0px;}
h1{text-align:center;color:#666;margin-top:18px;}
#content{width:700px;height:250px;border:5px solid green;margin:20px auto;position:relative;}
#obj1{height:100px;background:#d5d5d5;}
#obj2{background:#777;}
#obj3{position:absolute;top:200px;left:150px;width:200px;background:#555;}
#obj4{height:100px;background:#999;margin-top:50px;}
.active{color:#f00}
</style>
</head>
<body>
<h1>悟透事件的捕獲和冒泡</h1>
<div id="content">
<div id="obj1">
<h2>元素a</h2>
<div id="obj2">
<h2>元素b</h2>
<div id="obj3">
<h2>元素c</h2>
</div>
</div>
</div>
<div id="obj4">
<h2>元素d</h2>
</div>
</div>
<script type="text/javascript">
var divs=document.getElementById("content").getElementsByTagName("div");
var count=1;
for(var i=0;i<divs.length;i++){
bindEvent(divs[i],"click",function(){
var obj=document.createTextNode("->"+count++);
this.getElementsByTagName("h2")[0].insertBefore(obj,null);
this.className="active";
});
}
//取消冒泡事件
function stopBubble(e){
e=e||window.event; //firefox,chrome,etc.||IE,opera
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
}
//綁定事件
function bindEvent(elem,type,fn){
if(elem.attachEvent){
var typedRef="_"+type;
if(!elem[typedRef]){
elem[typedRef]=[];
}
for(var i in elem[typedRef]){
if(elem[typedRef][i]==fn){
return;
}
}
elem[typedRef].push(fn);
elem["on"+type]=function(){
for(var i inthis[typedRef]){
this[typedRef][i].apply(this,arguments);
}
}
}
else{
elem.addEventListener(type,fn,false);//改為true 就是捕獲事件了
}
}
</script>
</body>
</html>
取消冒泡事件
?? 這時從《這里 》看到的，然后自己打了一次代碼加深印象的?
在默認情況下，發生在一個子元素上的單擊事件（或者其他事件），如果在其父級元素綁定了一個同樣的事件，此時點擊子元素，click事件會首先被子元素捕獲，執行綁定的事件程序，之后會被父級元素捕獲，再次激發一段腳本的執行，這就是所謂的“事件冒泡”。
<html>
<head>
<title>
<style type="text/css">
*{ margin:0px; padding:0px;}
</style>
</title>
</head>
<body>
<div id="obj1" style="width:500px;height:500px; background:#000;">
<div id="obj2" style="width:400px;height:400px; background:red;"></div>
</div>
<script type="text/javascript">
function stopBubble(e){
//如果傳入了事件對象，那么就時非IE瀏覽器
if(e&&e.stopPropagtion){
e.stopPropagtion();
}
else{
window.event.canceBubble=true;
}
}
var obj1=document.getElementById_x_x('obj1');
var obj2=document.getElementById_x_x('obj2');
obj1.onclick=function(){
alert('我點擊了obj1');
}
obj2.onclick=function(e){
alert('我點擊了obj2');
stopBubble(e);
}
</script>
</body>
</html>
模板)
)
)
)
——1.5 小結和練習)
