問題與JS事件冒泡

<!DOCTYPE HTML> 
<html> 
<body> 
<style type="text/css"> 
#a {background-color:blue;width:100px;height:200px;} 
#b {background-color:red;margin-left:25px;width:50px;height:100px;} 
</style> 
<div id="a">a 
    <div id="b">b</div> 
</div> 
<script> 
document.getElementById("a").onclick = function() {console.log("A is clicked");} 
document.getElementById("b").onclick = function(event) {console.log("B is clicked");event.stopPropagation();} 
document.onclick = function() {console.log("Document is clicked");} 
</script> 
</body> 
</html>

問題：問題與JS事件冒泡

1. function(event)，event是形式參數，什麼是實際參數？實際參數如何傳遞給事件？因爲通常我們用下面的樣式參數：

function method(int num){ //num is the formal 
/*implementation*/ 
} 

//in main 
method(42); //42 is the actual

當我點擊DIV一，在控制檯，它表明：

A is clicked 
Document is clicked

我想結果應該是

A被點擊
B被點擊

這是我的想法：點擊DIV一個時，document.getElementById("a").onclick得到excuted，然後document.getElementById("b").onclick得到excuted，因爲我們有event.stopPropagation();將在格B停止，並且不會EXCUTE document.onclick，但似乎不以這種方式工作，任何人都可以幫助我理解這裏發生了什麼？

來源

2013-06-27 user2294256

關於事件的極好的[Quirksmode文章]（http://www.quirksmode.org/js/introevents.html）。 – Teemu

function(event) 是形式參數，什麼是實際參數？

實際參數是由瀏覽器創建的事件對象。對於點擊事件，它將是一個MouseEvent的實例。

當我點擊的div一個...我想結果應該是...

你點擊的父b。該事件從目標向上傳播DOM樹，因此它永遠不會觸及b。傳播階段將從a開始，並向上移動，直到它到達文檔。

如果您點擊了b，stopPropagation方法會阻止該事件冒泡，並且只會在輸出中看到「B被點擊」。

來源

2013-06-27 09:48:53

事件傳播意味着事件進入祖先鏈直到文檔對象。

所以在你的情況下，附加到元素a和文檔的事件都會被觸發。當你點擊元素b時，只有元素b被附加的事件被觸發，因爲從那個點開始阻止傳播。

來源

2013-06-27 09:48:41

event是瀏覽器事件。你不能真的改變它，但你可以使用閉包或使用數據屬性將更多的數據傳遞到你的事件處理程序。單擊A時得到正確的結果。事件向上冒泡直至達到文檔的根元素。如果你停止傳播，你可以防止它向上冒泡到它的父元素。如果您點擊b，那麼它會向上冒泡到a，然後到body。但你停在b傳播所以唯一的輸出應該

B is clicked

的event對象本身是在每個瀏覽器的不同，雖然是它的一個recommendation。某些瀏覽器不支持stopPropagation和preventDefault方法或其他屬性（例如，較早的IE不完全支持DOM Level 2規範）。

來源

2013-06-27 09:57:39 Poetro

問題與JS事件冒泡

回答

相關問題