Capítulo 16

Eventos - Delegação de evento

JavaScript

<script type="text/javascript">
var EventUtil = {
	addHandler: function() {...},
	getEvent: function(event) {...},
	getTarget: function() {...}
}
window.onload = function() {
var cmenu = document.getElementById("cmenu");
EventUtil.addHandler(cmenu, "click", function(event) {
	event = EventUtil.getEvent(event);
	alvo = EventUtil.getTarget(event)
		switch(alvo.id) {
			case "fonte":
				cmenu.style.fontSize = "20px";
				break;
			case "contraste":
				cmenu.style.cssText = "background:black;color:white;"
				break;
			case "cor":
				cmenu.style.color = "red";
				break;
			case "largura":
				cmenu.style.width = "300px";
				break;
			case "default":
				cmenu.style.cssText = "background:none;color:none;fontSize:none;width:none;"
				break;
		}
});
}
</script>

HTML

...
<ul id="cmenu">
	<li id="fonte">Aumentar tamanho da fonte</li>
	<li id="contraste">Aumentar contraste</li>
	<li id="cor">Mudar a cor</li>
	<li id="largura">Largura 300px</li>
	<li id="default">Estilos default</li>
</ul>
...