<div id="b0" class="box">
	<div id="b1"  class="box">
		<div id="b2" class="box">
			<div id="b3" class="box">
				<div id="b4" class="box inner">
				</div>
			</div>
		</div>
	</div>
</div>

<table class="empty">
	<thead>
		<tr>
			<th>target</th>
			<th>phase</th>
			<th>currentTarget</th>
			<th>this</th>
			<th>listener</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5">Click on the boxes!</td>
		</tr>
	</tbody>
</table>
$col-bg: #f3f3f3;
$col-outer-box: #bbb;
$sp: 40px;

html {
	//pointer-events: none;
}
body {
	margin: 20px 0 0;
	background-color: $col-bg;
	color: #9a9796;
	//pointer-events: none;
	
	display: flex;
	> * {
		flex: 0 0 auto;
		&:first-child {
			margin-right: 20px;
		}
	}
	justify-content: center;
	align-items: flex-start;
	
	font-family: monospace;
	font-size: 13px;
}

.box {
	display: inline-block;
	font-size: 0;
	padding: $sp;
	
	.inner {
		padding: 0;
		width: $sp;
		height: $sp;
	}
	
	transition: background-color 0.3s;
	cursor: pointer;
	
	position: relative;
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		width: $sp;
		line-height: $sp;
		text-align: center;
		
		font-size: 14px;
		//font-family: monospace;
		
		color: #000;
		
		opacity: 0;
		transition: opacity 0.3s;
	}
}

body > .box {
	background-color: $col-outer-box;
	&::after {
		content: 'b0';
		opacity: 1;
	}
	> .box:hover {
		background-color: lighten($col-outer-box, 5%);
		&::after {
			content: 'b1';
			opacity: 1;
		}
		> .box:hover {
			background-color: lighten($col-outer-box, 10%);
				&::after {
				content: 'b2';
				opacity: 1;
			}
			> .box:hover {
				background-color: lighten($col-outer-box, 15%);
				&::after {
					content: 'b3';
					opacity: 1;
				}
				> .box:hover {
					background-color: lighten($col-outer-box, 20%);
					&::after {
						content: 'b4';
						opacity: 1;
					}
				}
			}
		}
	}
}

table {
	border-collapse: collapse;
	th, td {
		padding: 5px;
	}
	th {
		padding-top: 0;
		text-align: left;
	}
	&.empty tbody > tr:first-child {
		text-align: center;
	}
}
View Compiled
var
	table = document.querySelector('table'),
	tbody = table.querySelector('tbody')
;

addEventListeners();

function addEventListeners() {
	window.addEventListener('click', clearLog, true);
	
	var innerBox = document.querySelector('.box.inner');
	
	var n = innerBox;
	while (n) {
		n.addEventListener('click', listener('c1'), true);
		n.addEventListener('click', listener('c2'), true);
		n.addEventListener('click', listener('b1'));
		n.addEventListener('click', listener('b2'));

		n = n.parentNode;
	}
	window.addEventListener('click', listener('c1'), true);
	window.addEventListener('click', listener('c2'), true);
	window.addEventListener('click', listener('b1'));
	window.addEventListener('click', listener('b2'));
}

function listener(id) {
	return function(e) {
		log(e.eventPhase, e.currentTarget, this, e.target, id);
	}
}

function log(phase, currentTarget, _this, target, id) {
	var row = document.createElement('tr');
	
	td = document.createElement('td');
	td.innerHTML = formatNode(target);
	row.appendChild(td);

	switch (phase) {
		case Event.CAPTURING_PHASE:
			phase = 'capturing';
			break;
		case Event.AT_TARGET:
			phase = 'at target';
			break;
		case Event.BUBBLING_PHASE:
			phase = 'bubbling';
			break;
	}
	var td = document.createElement('td');
	td.innerHTML = phase;
	row.appendChild(td);
	
	td = document.createElement('td');
	td.innerHTML = formatNode(currentTarget);
	row.appendChild(td);
	
	td = document.createElement('td');
	td.innerHTML = formatNode(_this);
	row.appendChild(td);
	
	td = document.createElement('td');
	td.innerHTML = id;
	row.appendChild(td);
	
	tbody.appendChild(row);
}

function formatNode(n) {
	var out;
	
	if (n == window)
		out = 'window';
	else {
		out = n.nodeName.toLowerCase();
		if (n.id) 
			out += '#' + n.id;
	}
	
	return out;
}

function clearLog() {
	tbody.innerHTML = '';
	table.classList.remove('empty');
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.