JavaScript addEventListener爲什麼它不會在這裏冒泡？

Question

AFAIK使用單擊事件並且addEventListener()應該從最裏面的元素直到最外層的父元素。那麼下面的代碼有什麼問題？

function ChangeBackground(e){ 
 
    e.target.style.background = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")"; 
 
} 
 

 
var all= document.querySelectorAll("div,span,p"); 
 
for(var i=0; i<all.length;i++){ 
 
    all[i].addEventListener("click",ChangeBackground); 
 
}

div, span, p{ 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 1px solid; 
 
}

<span>span 
 
    <div>div 
 
    <p>p</p> 
 
    </div> 
 
    <p>p</p> 
 
</span> 
 
<div>div 
 
    <div>div 
 
    <div>div</div> 
 
    </div> 
 
    <div>div</div> 
 
</div>

當我點擊p，它不會改變它的父元素的背景。

Answer 1

它確實有泡沫。問題出在處理程序中，我提到e.target而不是this。下面有校正後的代碼片斷：
（注意，默認的背景是透明的。）

function ChangeBackground(e){ 
 
    this.style.background = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")"; 
 
} 
 

 
var all= document.querySelectorAll("div,span,p"); 
 
for(var i=0; i<all.length;i++){ 
 
    all[i].addEventListener("click",ChangeBackground,false); 
 
}

div, span, p{ 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border: 1px solid; 
 
}

<span>span 
 
    <div>div 
 
    <p>p</p> 
 
    </div> 
 
    <p>p</p> 
 
</span> 
 
<div>div 
 
    <div>div 
 
    <div>div</div> 
 
    </div> 
 
    <div>div</div> 
 
</div>