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. Heres исправленный фрагмент кода:
(Обратите внимание, что фон по умолчанию является прозрачным.)

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>