Edit in JSFiddle

var one = document.getElementById('one'),
	two = document.getElementById('two'),
	three = document.getElementById('three'),
	four = document.getElementById('four'),
	btn = document.querySelector('button');

window.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] window clicked');
	else
		log('[capturing] window clicked');
}, true);

window.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] window clicked\n');
	else
		log('[bubbling] window clicked\n');
}, false);

one.addEventListener('click', function(e){
	/** 이벤트의 전파를 종료합니다. **/
	e.stopPropagation();

	if (e.target == this)
		log('[target] one clicked');
	else
		log('[capturing] one clicked');
}, true);

two.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] two clicked');
	else
		log('[bubbling] two clicked');
});

three.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] three clicked');
	else
		log('[capturing] three clicked');
}, true);

four.onclick = function(e){
	if (e.target == this)
		log('[target] four clicked');
	else
		log('[bubbling] four clicked');
};

btn.onclick = function(e){
	if (e.target == this)
		log('[target] button clicked');
	else
		log('[bubbling] button clicked');
};


function log(newtext) {
	var logger = document.querySelector('textarea');
	logger.value += newtext + "\n";
	logger.scrollTop = logger.scrollHeight; 
}
[capturing/bubbling] (window)
<div id="one">
	[capturing] one: stopPropagation()
	<div id="two">
		[bubbling] two
		<div id="three">
			[capturing] three
			<div id="four">
				[bubbling] four
				
				<button>[bubbling] button</button>
			</div>
		</div>
	</div>
</div>

<textarea readonly></textarea>
* {
	font-size: 1rem;
}
div { 
  margin: 10px; 
  padding: 10px;
  background-color: #90CAF9;
}
#two, #four {
	background-color: #1E88E5; 
}
button {
	display: block;
}
textarea { 
	width: 100%;
	height: 150px;
}