jquery冒泡事件详解

上面四部分无论在代码还是在结果上都存在一定的差异，下面分别对各个部分进行分析：

图一代码分析：body,div,#d1,#d2，都存在点击事件，所以当点击input #d2时，先是#d2执行click事件，由于冒泡事件的触发，#d2的上一级div也被触发了点击事件，于是继续执行div的点击事件，从而执行$("#d2").html(“欢迎来到jquery世界”)方法，由于html("")方法会将原有内容清空，重置内容，因此在执行#d2后返回的内容被清空，只显示div点击事件后要显示的内容，由于stopPropagation()，div以后将停止冒泡事件的继续执行。
图二，将#d2触发的点击事件后的结果放在p #p2中，此时两个事件的结果都显示了出来，因此该用例更好的证明了html("")会将内容清空。。。。

图三，将代码中的第一个加载函数中绑定事件的html("")内容删除，即该事件被触发以后不会再将div #p1 的原有内容清空。。根据图一的解释，可知#d2点击以后先执行#d2，之后会继续执行div的点击事件，根据图二的结果的内容显示顺序也更好的证明了冒泡事件的发生。

图四，body点击时不再触发点击事件，也将#d2从其父级div中取出来，变成了其同级，此时再点击#d2时，只执行的了#d2的点击事件，从这方面来看，确实存在着冒泡事件。