近日在項目中遇到一些問題，一個是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()此方法即可是阻止事件追加也可以阻止事件冒泡

總結

以上是生活随笔為你收集整理的jQuery中的事件冒泡、事件捕获和事件追加引发的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。