本文主要介紹事件冒泡，和利用冒泡方法的事件代理機制。
根據瀏覽器的兼容性問題作出代碼舉例
事件冒泡就是在DOM中，父級元素與子集元素有相同事件時，觸發子集元素會引發從子集開始往上的事件響應。
具體可以寫多重包裹的div，並且所有元素添加相同的事件觸發；檢驗觸發子元素時，父元素的狀態即可。
那麼怎麼取消冒泡機制呢？
不同的瀏覽器之間有差別，在此需要進行兼容性處理。如下兩個方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script>
window.onload = function(){
/*測試取消冒泡方法代碼 */
var btn = document.getElementById('secondDiv');
btn.onclick = function(evnt){
var event = evnt||window.event;
if(event.stopPorpergation){ //FF下的處理
event.stopPorpergation();
}else{
event.cancelBubble = true;//IE下的處理
}
}
document.getElementById('firstDiv').onclick = function(){alert('hi~firstDiv');};
document.onclick = function(){alert('hi~body');};
}
</script>
</head>
<body>
<div id="firstDiv" style="background-color:red;width:300px;height:300px;">
The First DIV
<div id="secondDiv" style="background-color:blue;width:150px;height:150px;">
The Second DIV</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script>
window.onload = bubble;
function bubble(){
document.getElementById("firstDiv").onmousedown = function(evnt){
var theEvent = evnt ? evnt : window.event;
alert("the First DIV's bubble");
stopBubble(theEvent);
}
document.getElementById("secondDiv").onmousedown = function(evnt){
var theEvent = evnt ? evnt : window.event;
alert("the Second DIV's bubble");
stopBubble(theEvent);
}
document.onmousedown = function(){
alert("the document bubble");
}
}
function stopBubble(evnt){
if(evnt.stopProragation){
evnt.stopPropagation();
}
else
evnt.cancelBubble = true;
}
</script>
</head>
<body>
<div id="firstDiv" style="background-color:red;width:300px;height:300px;">
The First DIV
<div id="secondDiv" style="background-color:blue;width:150px;height:150px;">
The Second DIV</div>
</div>
</body>
</html>結果：
點擊The Second DIV：沒有反映
事件代理
什麼是事件處理？
在傳統的事件處理中，應按照需求爲每一個元素添加或刪除事件處理器。
通過事件代理可以把事件處理器添加到一個父級元素當中；
當多個元素的事件被觸發時，利用冒泡機制將事件和與之對應的元素查找， 即可在僅在父類元素中處理多個事件。
這樣有效地避免了多個事件處理器導致的內存泄露或者性能下降的問題。
事件處理怎麼做？
利用冒泡機制，把事件從原始元素冒泡到DOM樹最上層。
過程：事件處理器在一個元素上，等待一個事件從子集元素冒泡上來，並得知這個事件從那個元素開始：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*事件代理*/
window.onload = function editCell(e){
var target = getEventTarget(e);
if(target.tagName=='div')
{
target.style.backgroundColor = 'red';
}
}
function getEventTarget(e){ //獲取目標元素函數
var e = e||window.e;
//target是FF下的對象，srcElement是IE下的，二者均可在chrome最新版使用
return e.target||e.srcElement;
}
</script>
</head>
<body>
<div>a1</div>
<a>a1</a>
<div>a2</div>
<a>a2</a>
<div>a3</div>
<a>a3</a>
<div>a4</div>
<a>a4</a>
</body>
</html>