Desenvolvimento

Teste 5 - Particularidades sobre Eventos

Handler de Evento Global

Os objetos específicos de uma página da Web possuem vários eventos. Cada evento pode ser usado para acionar uma função JavaScript, por exemplo. No entanto, é possível ainda definir os resultados de um evento específico, independente do objeto.

Quando o corpo <body> do documento é carregado, o evento onload() faz com que a função defaultEvents() seja executada. defaultEvents() é responsável por atribuir/configurar os eventos globais que serão executados em qualquer parte da janela do browser.

Dois eventos foram usados neste exemplo:

onclick() - Quando este evento ocorre, em qualquer lugar dentro da página, a função errorOn() é acionada, mostrando uma janela com uma mensagem.
onmouseout() - Quando este evento ocorre, em qualquer lugar dentro da página, a função toggleColor() é acionada, alterando a cor do fundo da página (que passa de #e8ffe8 a #3f0 e vice-versa) em qualquer lugar do container cujo id é 'corpo', ou seja, dentro de todo o corpo do documento.

Atenção: A sintaxe de onclick e onmouseout junto a document deve ser sempre em letras minúsculas, ou o código não funcionará.

<head>
   <script src='../js/findDOM.js' type='text/javascript'></script>
   <script type='text/javascript'>
      var isNS = 0
      var isIE = 0
      if (navigator.appName.indexOf('Netscape') != -1) {isNS = 1}
      else {
         if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {isIE = 1}
      }

      function defaultEvents() {
         if (isNS) { document.captureEvents(Event.CLICK || Event.MOUSEOUT) }
         if (isDHTML) {
            document.onclick = errorOn
            document.onmouseout = toggleColor }
      }

      function errorOn() {
         alert('Sempre que clicar em qualquer lugar desta página você será obrigado a ver esta janela!')
      }

      function toggleColor() {
         fundo = findDOM('corpo',1)
         if ((fundo.backgroundColor == '#e8ffe8') || (fundo.backgroundColor == 'rgb(232, 255, 232)'))
            fundo.backgroundColor = '#3f0'
         else
            fundo.backgroundColor = '#e8ffe8'
      }
   </script>
</head>

<body onload="defaultEvents()">
   ...
   <div id="corpo"> ... <div>
</body>

O script findDom.js é também usado para a detecção de um browser DHTML (variável isDHTML, ver código clicando aqui). As variáveis isNS e isIE identificam o Netscape e o Microsoft Internet Explorer.

A função toggleColor() possui duas checagens de estilos background-color devido às características do Netscape, que referencia as cores em escala rgb. Todas as mudanças de estilo devem ser SEMPRE cuidadosamente avaliadas devido à compatibilidade do código com múltiplos browsers.

Outra coisa a se levar sempre em conta é a declaração de estilos dentro do código JavaScript. No JavaScript, as palavras não podem incluir pontos, hífens ou qualquer outro separador. A propriedade font-size, por exemplo, deve ser escrita como fontSize. A regra geral no JavaScript é, portanto, que todas as letras devem aparecer minúsculas, exceto pela primeira letra de todas as palavras que vêm depois da primeira palavra. É importante testar sempre o código antes de disponibilizá-lo.

Passando Eventos para uma Função

O objeto event é usado para identificar o DOM que gerou o evento. Como teste, deve-se clicar na imagem do rato gigante abaixo.

Eis os trechos cruciais do código desta parte:

<head>
   <script type='text/javascript'>
      function passItOn(evt) {
         if (evt) {
            alert(evt)
            return
         }
      }
   </script>
</head>

<body>
   <div id='ratao'>
      <a href="javascript:void('')" onclick="passItOn(event)">
         <img src="../pics/pht_tanzrat.jpg" />
      </a>
   </div>
</body>

O objeto event representa o estado de um evento, o que inclui dados como o elemento em que o evento ocorreu, o estado das teclas, a localização do ponteiro do mouse, e até mesmo o estado dos botões do mouse. O objeto event está disponível apenas durante um evento, isto é, é possível usá-lo apenas em handlers de evento, e não em outras partes do código.

O exemplo mostra simplesmente que o objeto event captura o DOM do componente que gerou o evento (neste caso, o evento onClick a partir de um objeto). O único propósito da função passItOn() é tomar o argumento de entrada evt e exibí-lo numa mensagem de alerta JavaScript. Este argumento vem a ser exatamente o componente da página que gerou o evento ([object]).