Palavras-chave: DOM, eventos, target
Existem diversas maneiras de registrar um evento. Na forma tradicional, a função deve ter como único parâmetro uma referência ao evento que a invocou. Então, se a função não recebe nada além desse parâmetro, como descobrir quem emitiu o evento?
Imagine que você possua três DIVs e deseje fazer alguma coisa com eles. Vamos associar o evento onClick a uma função chamada mudacor.
...
<div id="um">UM</div>
<div id="dois">DOIS</div>
<div id="tres">TRES</div>
<script type="text/javascript">
document.getElementById('um').onclick = mudacor;
document.getElementById('dois').onclick = mudacor;
document.getElementById('tres').onclick = mudacor;
</script>
...
O padrão W3C define que eventos possuem o atributo target, responsável por indicar a origem do evento. Contudo, o Internet Explorer ignora esse padrão e diz que deve ser usado srcElement. De qualquer maneira, o comportamento é o mesmo. Vejamos como implementar essa função.
O Internet Explorer ignora o parâmetro passado à função. Segundo ele, os eventos pertencem ao objeto window. Assim, antes de recuperar o atributo target (ou srcElement) é preciso verificar se o evento realmente existe.
function mudacor(e) {
var emissor;
if(!e) var e = window.event;
if (e.target) emissor = e.target;
else if (e.srcElement) emissor = e.srcElement;
emissor.style.backgroundColor = '#00FF00';
}
\o/
Valeu, eu estava justamente procurando essa informação. Tava lendo uns posts do blog e acabei topando com esse post!
Valeu.
Hoje me deparei com esse problema mala do IE, que raiva que dá! Vi num outro site uma maneira um pouco mais sucinta de tratar da exceção do IE. Na função mudacor, poderia ser assim:
var e, emissor;
e = e || window.event;
emissor = e.target || e.srcElement;
Ou melhor ainda, guardar isso numa função bacana:
function getEventTarget(evt) {
evt = evt || window.event;
return evt.target || evt.srcElement;
}
Resolveu um problemão aqui comigo. Valeu mesmo pela dica, muito boa.