Introduction and application of JavaScript event bubbling
1. What is event bubbling
Trigger a certain type of event on an object (such as a click onclick event), if the object defines a handler for this event, then this event will call this handler, if this event handler is not defined or the event returns true, then The event will propagate to the object's parent, inside and out, until it is handled (all events of the parent's class will be activated), or it reaches the top level of the object hierarchy, the document object (some view device is window).
For example: you want to appeal a case in the local court. If there is no local court to handle such cases, the relevant local departments will help you continue to appeal to the higher court, such as from the municipal level to the provincial level, until the central court. Finally getting your case settled.
2. What does event bubbling do?
(1) Event bubbling allows multiple operations to be processed centrally (adding event handlers to a parent element, avoiding adding event handlers to multiple child elements), it also allows you to Level capture event .
【Example of centralized processing】
window.event;
var obj = e.target || e.srcElement;
alert(obj.id + ' was click ' )
}
</ script >
(2) Let different objects capture the same event at the same time , and call their own exclusive handlers to do their own things, just like the boss gives an order, and their employees do their jobs.
[Example of capturing the same event at the same time]
< div onclick ="inSideWork()" id ="inSide" style ="width:100px; height:100px; background:#CCC" ></ div >
</ div >
< script type ="text/javascript" >
function outSideWork()
{
alert( ' My name is outSide,I was working... ' );
}
function inSideWork()
{
alert( ' My name is inSide,I was working... ' );
}
// 因为下面程序自动激活单击事件，有些浏览器不允许，所以请单击灰色盒子，从这里开始下命令，这样因为冒泡的原因，黑色大盒子也会收到单击事件，并调用了自己的处理程序。如果还有更多盒子嵌套，一样道理。
/*
function bossOrder()
{
document.getElmentById('inSide').click();
}
bossOrder();
*/
</ script >
三、需要注意什么
●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。（2）Netscape4.0从外到里（outside→inside）的捕获型事件。（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。
●不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。
●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。
四、阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
【不想激活的事件被激活例子】
< div onclick ="openWin('http://www.google.com')" id ="inSide" style ="width:100px; height:100px; background:#CCC" ></ div >
</ div >
< script type ="text/javascript" >
// 本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。
function openWin(url)
{
window.open(url);
}
</ script >
下面是本人在网上抄的一个方法，把这个方法放在精准目标对象处理程序结尾，本事件触发处理结束后，事件将不在进行冒泡处理。
【阻止事件冒泡例子】
< div onclick ="showMsg(this,event)" id ="inSide" style ="width:100px; height:100px; background:#CCC" ></ div >
</ div >
< script type ="text/javascript" >
// 阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
// function stopBubble (e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble = true } </ script >