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>
...
Arquivos exemplo: « anterior | capítulo 17 »