js中什麼是事件冒泡？
阿新 • • 發佈：2020-12-04
在一個物件上觸發某類事件，這個事件會向這個物件的的父級傳播，從裡到外，直至它被處理或者到達了物件層次的最頂層，即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 資源搜尋網站大全 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