alexandreaquiles/capture.html

## capture.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<style>
			ul, li, span { border: 1px black solid;}
			li { margin: 5px; padding: 5px;}
		</style>
		<ul>
			<li>Clica no li 1 <span>ou no span 1</span></li>
			<li>Clica no li 2 <span>ou no span 2</span></li>
			<li>Clica no li 3 <span>ou no span 3</span></li>
			<li>Clica no li 4 <span>ou no span 4</span></li>
			<li>Clica no li 5 <span>ou no span 5</span></li>
		</ul>

		<script>
			function escuta(seletor, capture){
				var lista = document.querySelectorAll(seletor);
				for(var i = 0; i < lista.length; i++){
					var elemento = lista[i];
					elemento.addEventListener("click", function(e){
						console.log((capture ? "↓ capture - " : "↑ bubbling - ") +
								"e.currentTarget: " + e.currentTarget.tagName +
								", e.target: " + e.target.tagName);
					}, capture);
				}
			}
			escuta("*");
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<style>
	ul, li, span { border: 1px black solid;}
	li { margin: 5px; padding: 5px;}
	</style>
	<ul>
	<li>Clica no li 1 <span>ou no span 1</span></li>
	<li>Clica no li 2 <span>ou no span 2</span></li>
	<li>Clica no li 3 <span>ou no span 3</span></li>
	<li>Clica no li 4 <span>ou no span 4</span></li>
	<li>Clica no li 5 <span>ou no span 5</span></li>
	</ul>

	<script>
	function escuta(seletor, capture){
	var lista = document.querySelectorAll(seletor);
	for(var i = 0; i < lista.length; i++){
	var elemento = lista[i];
	elemento.addEventListener("click", function(e){
	console.log((capture ? "↓ capture - " : "↑ bubbling - ") +
	"e.currentTarget: " + e.currentTarget.tagName +
	", e.target: " + e.target.tagName);
	}, capture);
	}
	}
	escuta("*");
	</script>
	</body>
	</html>