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 객체로부터 캡쳐링이 시작되고, 버블링이 끝납니다.
window.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] window clicked');
	else
		log('[capturing] window clicked');
}, true);

// 버블링 속성의 핸들러를 등록하려면 뒤에 false 인자를 추가하고,
window.addEventListener('click', function(e){
	if (e.target == this)
		log('[target] window clicked\n');
	else
		log('[bubbling] window clicked\n');
}, false);

// 캡쳐링 속성의 핸들러를 등록하려면 뒤에 true 인자를 추가합니다.
one.addEventListener('click', function(e){
	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');
	
	// 사실 <button>이 DOM 트리의 최하위 Element라서 capturing이나 bubbling phase에서 이 핸들러가 호출될 일은 없습니다.
	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
	<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;
}