近日在專案中遇到一些問題，一個是ID值唯一存在的問題，另一個便是事件的追加產生的錯誤。
關於ID值唯一存在，從id的定義來看，id代表唯一的元素，若頁面中出現多個標籤存在相同的id，那麼此時只有第一個id所在的標籤起作用，而且會多次起作用。所以若需要多個相同的元素出現在一個頁面上，切記不要使用相同的ID值，建議可使用class或者name。
其次是事件的冒泡、捕獲和追加事件，前兩者很好理解，見得也比較多，在此簡單介紹。
事件冒泡:子元素的事件向上冒泡至根級父元素，多次執行子元素上的事件。比如：

<div>
    <h1 click=click()></h1
 
>
</div>

這段程式碼中，雖然div標籤裡沒有定義click事件，但是因為div是h1的父級元素，所以當點選h1時，click事件會執行兩次。
同理，事件捕獲：父級元素的事件向下捕獲至根級子元素，多次執行父元素上的事件。比如：

<div click=click()>
    <h1></h1>
</div>

這段程式碼中，雖h1標籤裡沒有定義click事件，但是因為h1是div的子元素，所以當點選div時，click事件會執行兩次。

事件追加：元素執行時會向同級元素查詢，多次執行。比如：

<div >
 

    <h1 class=“captal” click=click()></h1>
    <h1 class=“captal” click=click()></h1>
    <h1 class=“captal” click=click()></h1>
    <h1 class=“captal” click=click()></h1>
</div>

四個h1是完全一樣的，所以點選第一個h1的時候，會執行四次click,點選第二個h1時，會執行三次click，也就是說會在點選目標元素開始向下查詢，有幾個相同的就執行幾次。

幾種事件型別的解決方案
冒泡：因為存在相容性問題，所以有如下幾種方式來阻止冒泡

• event.stopPropagation() ；在基於firefox核心的瀏覽器中支援此做法
• event.cancelBubble=true；在基於ie核心的瀏覽器中的使用此做法
• return false；

event=(event)?event:window.event用來判斷如果是ie核心，返回後者，否則返回前者。
時間捕獲：

• event.preventDefault();
• return false；

事件追加：
- event.stopImmediatePropagation()此方法即可是阻止事件追加也可以阻止事件冒泡