在一個對象上觸發某類事件，這個事件會向這個對象的的父級傳播，從里到外，直至它被處理或者到達了對象層次的最頂層，即document對象。這個過程就是JavaScript的事件冒泡。
事件冒泡：
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或事件返回true,那么這個事件會向這個對象的的父級傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者到達了對象層次的最頂層，即document對象。
事件冒泡示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js事件冒泡</title> </head> <style> .outSide{ width:100px; height:100px; background:#000; padding:50px; } .inSide{ width:100px; height:100px; background:#CCC } </style> <body> <div onclick="outSideWork()" id="outSide"> <div onclick="inSideWork()" id="inSide"> </div> </div> </body> <script type="text/JavaScript"> function outSideWork() { alert('My name is outSide,I was working...'); } function inSideWork() { alert('My name is inSide,I was working...'); } </script> </html>資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
事件冒泡的作用：
（1）事件冒泡允許多個操作被集中處理，（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子元素上），它還可以讓你在對象層的不同級別捕獲事件。
//本例子只在外面盒子定義了處理方法，而這個方法一樣可以捕獲到子元素點擊行為並處理它。假設有成千上萬子元素要處理，難道我們要為每個元素加“onclick="eventHandle(event)"”？顯然沒有這種集中處理的方法來的簡單，同時它的性能也是更高的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js事件冒泡</title> </head> <style> .outSide{ width:100px; height:100px; background:#000; padding:50px; } .inSide{ width:100px; height:100px; background:#CCC } </style> <body> <div onclick="eventHandle(event)" id="outSide"> <div id="inSide"></div> </div> </body> <script> function eventHandle(e){ var e = e||window.event; var obj = e.target || e.srcElement; alert(obj.id +'was click!') } </script> </html>