首頁 > 開發者 > JavaScript
事件冒泡
事件捕獲：父級元素先觸發，子級元素後觸發
事件冒泡：子級元素先觸發，父級元素後觸發
現在在IE和FF下，觸發事件基本都是事件冒泡，由內向外的執行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>冒泡事件</title> <style type="text/css"> *{ margin:0; padding:0; } .div1{ width:200px; height:200px; background-color:#cccccc; overflow:hidden; } .div2{ width:100px; height:100px; background-color:gray; margin:50px; } </style></head><body> <div class="div1" onclick="javascript:alert('外');"> <div class="div2" onclick="javascript:alert('內');"></div> </div></body></html>
點擊div2的時候，先顯示“內”，再顯示“外”，這就是事件冒泡
阻止事件冒泡方法：
function stopBubble(event) { if (event && event.stopPropagation) { event.stopPropagation(); } else { window.event.cancelBubble = true; } }
使用：
//監視使用者何時把滑鼠移到元素上， //為該元素添加紅色邊框 unionDom[i].onmouseover = function(e) { this.style.border = "1px solid red"; stopBubble( e ); };
擷取事件來源：
function (event) { var e = event || window.event; var elem = e.srcElement || e.target; alert(elem.id);//elem就是事件來源 }
參考：
javascript事件冒泡與事件捕獲
javascript阻止冒泡事件、事件來源target、當前目標currentTarget解釋
javascript阻止事件冒泡和瀏覽器的預設行為
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
