JS中的事件冒泡——总结

　一. 有话要说

　　事件冒泡这个话题已经被园子里的朋友说透了，已经没什么要讲的了，但是由于呢我这边有个小问题刚好跟这个事件冒泡有关，就突然性想写个总结；一方面是给自己增加印象，另一方面给园子的新手们，提供一些方便 ^_^

　二. 事件冒泡

　　什么是事件冒泡？ 定义百度一搜一大把，我就不细讲了；我总结就是：dom行为机制的触发，并且存在上下级元素（父子级），如果不做些特殊操作，就会产生重复触发这个行为机制（事件）

　　具体表现：

　　<div style="width:100%;height:700px;">　　

　　　　<div style="width: 200px; height: 50px; border: 1px solid #000;">

　　　　</div>

　　</div>

　　jq:

$(document).ready(function () {

　　$("body").bind("click", function () {
　　　　alert("body元素被点击了");
　　});
　　$("div").bind("click", function () {
 　  　　alert("div元素被点击了");
 　 });
});

这样运行就会发现，当点击div范围的时候 会先触发div的点击事件，然后再是body的点击事件；为什么？

这是因为当我们为body和div分别绑定点击事件的时候，由于body是div的父元素，当div被点击时，dom会回溯找到它的(div)的父元素，并查看有没有为父元素绑定事件，有则触发，没有就继续查找div的父元素 这样不断的向上回溯查找 这就形成了事件冒泡。

这显然不是我们想到的结果，那怎么样才能做到当点击div的时候就只触发div的点击事件，而不要触发body的点击事件？

解决方案百度，园子里太多了，所以我这里就大概总结了那么几种方法

三. 解决方法

　　方法1. 直接在子元素(这里的div)js的最后增加一个 return false;

　　方法2. 当你把方法1的子元素的绑定方法抽出来放在元素上的onclick属性上的时候，方法1就不管用了，那么就要做以下处理：

　　function Test2(event) {
　　　　alert("div元素被点击了");
　　　　event = window.event || event;
　　　　if (event.stopPropagation)　　　　//停止向上传播事件   关于stopPropagation的解释，请点击这stopPropagation
　　　　　　event.stopPropagation();
　　　　else
　　　　　　event.cancelBubble = true;　//如果浏览器不支持stopPropagation 则设置cancelBubble来取消上传传播事件冒泡
};

　 方法3. 除了以上方法，还有一个方法值得注意，这个方法一开始我也不知道，是查了资料才知道的　

　　$("body").bind("click", function (e) {
　　　　e = e || window.event;
　　　　var src = e.target || e.srcElement;
　　　　if (src.tagName == "DIV") { //这里可以用属性，只要是符合dom标签属性规则的 比如 id等
　　　　//说明是点击了div
　　　　　　alert("div元素被点击了");
　　　　}
　　　　else {
　　　　　　//是在div范围外点击的
　　　　　　alert("body元素被点击了");
　　　　}
　　});

　希望这些对遇到事件冒泡的同学有些帮助 就写到这里了！