js你真的知道嗎?（二）

這個是關於事件冒泡的 。

這是一個簡單的事件冒泡，首先我們放幾個div。代碼如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
        }
        function change() {
            alert("change");
        }
        function change1() {
            alert("change1");
        }
        function change2() {
            alert("change2");
        }
    </script>
    <style type="text/css">
        #content{ width:500px; height:500px; border:1px solid green;}
        #content1{ width:300px; height:300px; position:absolute; top:50px; left:50px; border:1px solid red;}
        #content2{ width:200px; height:200px; position:absolute; top:50px; left:50px; border:1px solid blue;}   
        </style>
</head>
<body>
<div id="content" onclick="change();">
<div id="content1" onclick="change1();">
<div id="content2" onclick="change2();">我愛北京天安門</div>
</div>
</div>
</body>
</html>
這個代碼似乎看起來沒什麼問題。但是我們知道，absolute是絕對位置，所謂的絕對是相對於瀏覽器可視地區的左上方。

但是真正的布局卻成了這樣，我們的content2是position:absolute; top:50px; left:50px; 和content1一樣，按照常理來說應該content2和content1的座標原點也就是左上方應該是重合的。

這裡要注意這點，反正我是菜鳥也沒什麼原理性的知識來解釋這個問題。我只能說父容器的絕對位置影響到了子容器。

其實事件冒泡有2中方式，這種特性提現在Firefox瀏覽器上面。這個在下面再說。

我們現在要實現這樣一個功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function change1() {
            alert("change1");
        }
        function change2() {
            alert("change2");
        }
        function change3() {
            alert("change3");
        }
        function change() {
            document.getElementById("content2").innerHTML = "<input type='text'><input type='button' value='增加'/><input type='button' value='刪除'/>"
        }
    </script>
    <style type="text/css">
        #content{ width:500px; height:500px; border:1px solid green;}
        #content1{ width:300px; height:300px; position:absolute; top:50px; left:50px; border:1px solid red;}
        #content2{ width:200px; height:200px; position:absolute; top:50px; left:50px; border:1px solid blue;}   
        </style>
</head>
<body>
<div id="content" onclick="change1();">
<div id="content1" onclick="change2();">
<div id="content2" onclick="change3();">我愛北京天安門<input type="button" value="修改" onclick="change();"/></div>
</div>
</div>
</body>
</html>
當我們點擊修改按鈕的時候，我們 content2的內容變成了2個文字框2個按鈕。

當我們點擊修改的時候會出現我們想象的結果，但是大家仔細想象，我們的冒泡怎麼不在了 ，按照代碼的樣子，我們點擊修改的時候不但會觸發onclick事件，同時會觸發oncliclk3、oncliclk2、oncliclk1事件，但是為什麼我們點擊的時候不會觸發呢 。

我們說事件冒泡一般情況下是是從dom樹的事件來源的子節點向根節點逐步觸發的。當我們點擊按鈕的時候，觸發事件的真正的源頭就消失不見了。

我們可以這樣理解，就像我們說老大讓小弟去幹什麼事情，但是突然老大死了，小弟們就都閃了。

但是當我們點擊我們新添加的dom樹的節點裡面的所有標籤的時候仍然會觸發父節點的冒泡，這個時候我們就需要去阻止冒泡。

阻止事件冒泡：在ie下面我們用window.event,cancelBubble=true來阻止，在FF中我們用event.prevent.Default()來阻止冒泡。

這個時候我們就可以對我們添加的innerHTML中的標籤來添加一個事件，用這個事件去執行這些代碼。

由於剛剛喝了一點酒，思路不是很清晰。其實這個事件冒泡我們還可以寫到父節點中，沒必要為每個input標籤去添加這麼一個阻止事件冒泡的代碼。這裡我就不多寫了，早點睡了。

希望大家看到這裡能學到一點點東西，其實做程式的主要還是得自己多寫代碼自己多練。