ruturajv/event-capturing-bubbling-explained.html

## event-capturing-bubbling-explained.html
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	#parentDiv {
		border: 1px solid red;
		width: 400px;
		height: 300px;
	}
	#childDiv {
		border: 1px solid blue;
		width: 300px;
		height: 200px;
		margin: 10px;
	}
	</style>
	<title>Event Capturing and Bubbling</title>
</head>
<body>
	<div id="parentDiv">
		This is the parent Div
		<div id="childDiv">This is the Child</div>
	</div>
	<script type="text/javascript">
	window.addEventListener('load', function() {
		var parent = document.getElementById('parentDiv');
		parent.addEventListener("click", function(){
			console.log("Captured parent")
		}, true);
		parent.addEventListener("click", function(){
			console.log("Bubbled through parent")
		}, false);

		var child = document.getElementById('childDiv');
		child.addEventListener("click", function(){
			console.log("Captured child")
		}, true);
		child.addEventListener("click", function(){
			console.log("Bubbled through child")
		}, false);
	});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	#parentDiv {
	border: 1px solid red;
	width: 400px;
	height: 300px;
	}
	#childDiv {
	border: 1px solid blue;
	width: 300px;
	height: 200px;
	margin: 10px;
	}
	</style>
	<title>Event Capturing and Bubbling</title>
	</head>
	<body>
	<div id="parentDiv">
	This is the parent Div
	<div id="childDiv">This is the Child</div>
	</div>
	<script type="text/javascript">
	window.addEventListener('load', function() {
	var parent = document.getElementById('parentDiv');
	parent.addEventListener("click", function(){
	console.log("Captured parent")
	}, true);
	parent.addEventListener("click", function(){
	console.log("Bubbled through parent")
	}, false);

	var child = document.getElementById('childDiv');
	child.addEventListener("click", function(){
	console.log("Captured child")
	}, true);
	child.addEventListener("click", function(){
	console.log("Bubbled through child")
	}, false);
	});
	</script>
	</body>
	</html>