Campus Online
Javascript
Comportamento
Comportamento
Agora vamos tratar de algo essencial: responder às ações do usuário. Como você deve saber, uma ação que o usuário execute em
qualquer objeto de uma página é chamada de "evento". Há duas maneiras de associar código a um evento. A primeira, mais simples e
muito comum, é feita diretamente no HTML, assim:
<input type="button" value="Excluir" onclick="excluir()">
O código acima gera um botão que, quando recebe o evento click (ou seja, quando o botão é pressionado) executa a função javascript
excluir().
Você provavelmente já viu código assim um milhão de vezes. É, em muitos aspectos, a maneira mais fácil de se capturar eventos em
uma página simples. Há porém dois problemas básicos com o método que nos levam a querer aprender mais:
Falta de flexibilidade:
Você não pode criar de maneira transparente um script que mude o comportamente de um objeto.
Acoplamento:
Um dos objetivos dos Web Standards é que você possa manter separados conteúdo e estrutura (HTML), aparência (CSS) e
comportamento (javascript). Além de ferir os modernos princípios do webdesign, ainda destrói qualquer encapsulamento, acoplando seu
script ao seu HTML.
Acoplamento é a criação de código não organizado, de modo que alterar uma parte simples do código pode exigir alterações em
diversas outras partes que usam ou são usadas por aquela. <!--Chamamos, em orientação a objetos, de encapsulamento a propriedade
que os objetos possuem de conter todo o código referente ao que eles devem fazer, tornando-os praticamente independentes do lugar
onde serão usados e reduzindo drasticamente o acoplamento.->
EventListeners
Há, é claro, uma maneira de se atribuir código a um evento em um objeto através de script, o que garante grande flexibilidade e evita o
acoplamento. Não se iluda, simplesmente conhecer essa técnica não vai fazer automaticamente com que você desenvolva scripts com
bom nível de encapsulamento. É preciso algum estudo e planejamento para isso. Por outro lado, não conhecer estes detalhes vai
impedí-lo de realmente separar comportamento de conteúdo.
Vamos então ao que interessa. A recomendação do W3C sugere um método, addEventListener, para se atribuir um handler a um evento
qualquer. Isso funciona adequadamente em todos os navegadores atuais, exceto o Internet Explorer. Para este, a Microsoft inventou
seu próprio jeitinho de fazer as coisas. Trata-se do método attachEvent, que faz exatamente a mesma coisa do método proposto pelo
W3C. Felizmente, é muito fácil criar uma função compatível com todos os navegadores:
function addEvent(obj, evType, fn){
if (obj.addEventListener)
obj.addEventListener(evType, fn, true)
if (obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
Essa função é uma simplificação da usada por Simon Willison. Com ela você pode adicionar um handler de evento a um objeto de
maneira simples, funcioando em qualquer navegador atual, como mostrado no exemplo 12. No exemplo 13 você pode ver como é
simples separar conteúdo de comportamento. Se você remover a tag <script> no começo do documento vai ter HTML puro, sem
vestígios de qualquer DHTML.
Tratamento de Eventos
Basta agora entendermos como, numa função que recebe um evento, podemos entender qual foi o evento capturado e em que objeto
ocorreu. Chamamos a isso de tratar o evento. Novamente, temos aqui uma diferença entre o que o Internet Explorer inventa e o padrão
que o resto do mundo segue. Para qualquer navegador basta colocar um argumento na declaração de função que será handler e esse
argumento receberá o evento (um objeto da classe Event). No Internet Explorer o evento atualmente sendo tratado é armazenado em
window.event. Assim, na função de tratamento de evento ficamos com:
recebeClick(e){
if (typeof(e)=='undefined')var e=window.event
...
}
Basta isso para que em todos os navegadores a variável e contenha o objeto Event. Agora temos outro problema: a forma de capturar o
alvo do evento (o objeto que recebeu o evento) também é diferento no Internet Explorer. Ficaremos com o seguinte:
recebeClick(e){
if(typeof(e)=='undefined')var e=window.event
source=e.target?e.target:e.srcElement
...
}
Agora está quase pronto. Temos ainda uma diferença na implementação, no Safari (olha só, não é o Internet Explorer quem está
criando caso desta vez). Se o objeto que recebe o evento contiver texto, não sendo uma imagem ou campo de formulário, o source
capturado será o texto dentro do objeto. Um HTMLNodeElement do tipo 3. Não sei quem foi o maluco que implementou isso, mas agora
ficamos assim:
recebeClick(e){
if(typeof(e)=='undefined')var e=window.event
source=e.target?e.target:e.srcElement
if(source.nodeType == 3)source = source.parentNode
...
}
Você pode ver esse código funcionando no exemplo 14 (função foi()). Pode também ver algo mais complexo feito com isso no exemplo
15 (função sortThisTable()).
Está certo. Nesse capítulo o código começou a ficar mais complexo e tivemos que alterar um pouco o código para que funcionasse em
todos os browsers. Mas faça as contas. Colocamos uma função a mais, addEvent, no começo de cada script, e três linhas a mais em
cada handler de evento. Nada realmente complicado.
Cancelando Eventos
Conteúdo
[email protected]
Visie Padrões Web
Todos os Direitos Resevados © 2008 Visie Padrões Web