jQuery中的事件冒泡、事件捕获和事件追加引发的问题

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