js event bubble and capturing

Bubble:

pppppp

Capturing

pppppp

Mix

pppppp

To Stop Bubble

pppppp

// var inner,outer,outer1,outer2;

//bubble
inner=document.querySelector('.inner.bubble');
outer=document.querySelector('.outer.bubble');
outer1=document.querySelector('.outer1.bubble');
outer2=document.querySelector('.outer2.bubble');

outer2.addEventListener("click",function(a,b){
console.log('outer2 clicked');
});

outer1.addEventListener("click",function(a,b){
console.log('outer1 clicked');
});

outer.addEventListener("click",function(e){
//e.stopPropagation();
console.log('outer clicked');
});

inner.addEventListener("click",function(e){
console.log('inner clicked');
//e.stopPropagation();
});

//capturing
inner=document.querySelector('.inner.capturing');
outer=document.querySelector('.outer.capturing');
outer1=document.querySelector('.outer1.capturing');
outer2=document.querySelector('.outer2.capturing');

outer2.addEventListener("click",function(a,b){
console.log('outer2 clicked');
},true);

outer1.addEventListener("click",function(a,b){
console.log('outer1 clicked');
},true);

outer.addEventListener("click",function(e){
//e.stopPropagation();
console.log('outer clicked');
},true);

inner.addEventListener("click",function(e){
console.log('inner clicked');
//e.stopPropagation();
},true);

//mix
inner=document.querySelector('.inner.mix');
outer=document.querySelector('.outer.mix');
outer1=document.querySelector('.outer1.mix');
outer2=document.querySelector('.outer2.mix');

outer2.addEventListener("click",function(a,b){
console.log('outer2 clicked');
},true);

outer1.addEventListener("click",function(a,b){
console.log('outer1 clicked');
});

outer.addEventListener("click",function(e){
//e.stopPropagation();
console.log('outer clicked');
});

inner.addEventListener("click",function(e){
console.log('inner clicked');
//e.stopPropagation();
});

//stop
inner=document.querySelector('.inner.stop');
outer=document.querySelector('.outer.stop');
outer1=document.querySelector('.outer1.stop');
outer2=document.querySelector('.outer2.stop');

outer2.addEventListener("click",function(a,b){
console.log('outer2 clicked');
});

outer1.addEventListener("click",function(a,b){
console.log('outer1 clicked');
});

outer.addEventListener("click",function(e){
e.stopPropagation();
console.log('outer clicked');
});

inner.addEventListener("click",function(e){
console.log('inner clicked');
//e.stopPropagation();
});
// ]]>
JS Bin