juliancantillo/eventos_example.html

## eventos_example.html
<html>
	<head>
	</head>
	<body>
		<button id="btnEmisor">Llenar vaso</button>
		<button id="btnVaciar">Vaciar vaso</button>

		<div id="eventos">

		</div>
		<script>
		var boton = document.getElementById('btnEmisor'),
				eventos = document.getElementById('eventos');

		var vasoLleno = new Event('vaso_lleno');
		var llenarVaso = new Event('llenar_vaso');

		var Vaso = {
			capacidad: 100,
			contenido: 0,
			llenar: function(){
				if(this.contenido == 100){
					document.dispatchEvent(vasoLleno);
					return
				}

				console.log(this.contenido);

				document.dispatchEvent(llenarVaso);
				this.contenido += 10;
			},
			vaciar: function(){
				this.contenido = 0;
			}
		};

		var clickHandler = function (e) {
			Vaso.llenar();
		}

	  boton.addEventListener('click', clickHandler);

	  document.addEventListener('vaso_lleno', function(){
	  	alert('Se lleno el vaso');
	  });

	  document.addEventListener('vaso_lleno', function(){
	  	eventos.textContent = 'Se lleno el vaso';
	  });

	  document.addEventListener('vaso_lleno', function(){
	  	boton.disabled = true;
	  });

		</script>
	</body>
</html>
	<html>
	<head>
	</head>
	<body>
	<button id="btnEmisor">Llenar vaso</button>
	<button id="btnVaciar">Vaciar vaso</button>

	<div id="eventos">

	</div>
	<script>
	var boton = document.getElementById('btnEmisor'),
	eventos = document.getElementById('eventos');

	var vasoLleno = new Event('vaso_lleno');
	var llenarVaso = new Event('llenar_vaso');

	var Vaso = {
	capacidad: 100,
	contenido: 0,
	llenar: function(){
	if(this.contenido == 100){
	document.dispatchEvent(vasoLleno);
	return
	}

	console.log(this.contenido);

	document.dispatchEvent(llenarVaso);
	this.contenido += 10;
	},
	vaciar: function(){
	this.contenido = 0;
	}
	};

	var clickHandler = function (e) {
	Vaso.llenar();
	}

	boton.addEventListener('click', clickHandler);

	document.addEventListener('vaso_lleno', function(){
	alert('Se lleno el vaso');
	});

	document.addEventListener('vaso_lleno', function(){
	eventos.textContent = 'Se lleno el vaso';
	});

	document.addEventListener('vaso_lleno', function(){
	boton.disabled = true;
	});

	</script>
	</body>
	</html>