1.A versão oficial e original, em inglês, deste documento, encontra-se em: http://www.w3.org/MarkUp/2004/xmlevents-for-html-authors e os seus direitos são conforme:

2. A única versão normativa deste documento é a versão em língua inglesa que se encontra no sítio do W3C.

3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.

Este documento foi traduzido em 23 de setembro de 2005 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao para a língua portuguesa do Brasil, foi para este documento. Vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.
Por favor, relate erros encontrados neste documento para Maurício Samy Silva

W3C

Eventos XML para autores HTML

Steven Pemberton, W3C/CWI

Versão datada de: 21 de julho de 2004

Introdução

Este documento é uma rápida introdução a XML Events para autores HTML. Eventos XML é um método de captura de eventos em linguagens de marcação e que oferece uma série de vantagens sobre o HTML onclick para disparo de evento.

Tabela de conteúdos

  1. A idéa básica
  2. Outras maneiras de especificar relacionamentos
    1. No handler
    2. Com <listener>
    3. No Observador
  3. Fine details
    1. phase ("capture" | "default"*)
    2. target
    3. propagate ("stop" | "continue"*)
    4. defaultAction ("cancel" | "perform"*)
  4. Conclusões

A idéia básica

O mais importante a saber sobre evento XML é que ele usa exatamente o mesmo mecanismo de eventos do HTML, porém, escrito de uma forma diferente.

Considere um exemplo bem simples em HTML:

<input type="submit" onclick="verify(); return true;">

Neste exemplo o elemento <input> (ou qualquer um de seus elementos filho) captura o evento click e faz com que o código inserido no atributo de onclick seja executado.

Dizemos "ou qualquer um de seus elementos filho" porque em casos como o do abaixo mostrado

<a href="..." onclick="...">A <em>very</em> nice place to go</a>

ou ainda

<a href="..." onclick="..."><strong>More</strong></a>

O código em onclick será executado mesmo que o clique seja nos elementos <em> ou <strong>. Em casos como este, designamos o elemento clicável por target, -alvo- e o elemento que responde pelo evento por observer -observador- (muito embora o mais frequente é que target e observer sejam o mesmo elemento).

Então podemos notar que existem três coisas importantes envolvidas: um evento, um observador, é um script (chanado de handler). Pela leitura acima notamos ainda que uma quarta coisa envolvida, o alvo, não é usualmente importante.

Existem alguns problemas com a maneira pela qual o HTML faz o relacionamento entre estas três coisas:

Eventos XML especifica as diversas formas de relacionamento entre o evento o observador e o handler. Um código como abaixo :

<input type="submit" onclick="validate(); return true;">

teria seu equivalente assim::

<input type="submit">
   <script ev:event="DOMActivate" type="text/javascript">
      validate();
   </script>
</input>

(Notar que não existe ainda, linguagem de marcação que permita escrever o que foi mostrado acima: estes exemplos mostram, para fins de explicação dos conceitos aqui contidos, como deveria ser a linguagem de marcação. Ao final deste documento fornecemos algumas indicações que levam a linguagens que já se utilizam de eventos XML.)

O exemplo mostra que o elemento <script> é um handler para o evento DOMActivate (que usamos preferencialmente a click, porque botões podem ser ativados de maneiras diferentes e não somente por um clique) e na ausência de qualquer outra informação, o elemento pai é o observador (neste caso o <input>).

(Notar que handlers devem ser avaliados somente com a ocorrência do evento e não por ocasião do carregamento do documento, como ocorre com <script> no HTML4.)

Este conceito agora permite que você especifique handlers para diferentes linguagens de script:

<input type="submit">
   <script ev:event="DOMActivate" type="text/javascript">
      ...
   </script>

   <script ev:event="DOMActivate" type="text/vbs">
      ...
   </script>
</input>

e/ou eventos diferentes:

<input type="submit">
   <script ev:event="DOMActivate" type="text/javascript">

      ...
   </script>
   <script ev:event="DOMFocusIn" type="text/javascript">
      ...
   </script>
</input>

Você agora conhece o suficiente para projetar eventos usando Eventos XML. Contudo ainda existem algumas funcionalidades bastante úteis.

Outras maneiras de especificar relacionamentos

Tal como ocorre com o HTML, existem outras maneiras de especificar o relacionamento evento-observador-handler. Você pode colocar a informação no handler, no observador, ou em um elemento <listener>. Notar que qualquer que seja o método usado você deverá especificar sempre as três partes: assim se você usar um handler deverá ter um evento e um observador, se você usar um observador deverá ter um evento e um handler, usando <listener> deverá especificar os três.

A maior razão para isso é a de facilitar o gerenciamento do documento. Você poderá separar todos os scripts do corpo do documento. Isto evitará uma duplicação dos seus handlers, e em tendo uma só cópia central você poderá aplicá-la em vários lugares.

Especificando o relacionamento no handler

Quando você move o handler para alguma outra parte do documento, especifica o relacionamento ali (algo como o uso do atributo for no elemento <script> em HTML):

 <script ev:observer="button" ev:event="DOMActivate" type="text/javascript">

      validate();
 </script>
...
<input type="submit" id="button"/>

Especificando o relacionamento com <listener>

Quando você move o handler para alguma outra parte do documento, especifica o relacionamento em outro lugar com o elemento <listener> (isto possibilita o uso do mesmo handler para mais de um observador):

<ev:listener observer="button" handler="#validator" event="DOMActivate"/>
...
<script id="validator" type="text/javascript">
      validate();
</script>
...
<input type="submit" id="button"/>

(Notar que neste caso o elemento <listener> e não o atributo carrega o prefixo ev:)

Especificando o relacionamento no observador

E finalmente, você pode especificar o relacionamento no observador:

<script id="validator" type="text/javascript">

      validate();
</script>
...
<input type="submit" ev:handler="#validator" ev:event="DOMActivate"/>

Detalhes de refinamento

Na verdade para seu dia a dia com eventos isto é tudo o que você precisa saber. Existem alguns detalhes que ocasionamente poderão ser úteis.

phase ("capture" | "default"*)

Como já foi dito os handlers de eventos podem ser evocados por um elemento ou por qualquer um de seus filhos e desta forma é possível, por exemplo, esperar por cliques em qualquer coisa dentro de um parágrafo:

<p>
    <script ev:event="DOMActivate" type="...">
        ...
    </script>
    ...
    <a href="...">...</a>

    ...
    <a href="...">...</a>
    ...
</p>

que responderá a cliques tanto no conteúdo de <a> (como em qualquer coisa dentro do parágrafo).

Contudo, como os elementos <a> também possuem handlers neles mesmo, o atributo phase é usado com a finalidade de especificar se determinado handler deve ser ativado antes ou depois de um handler em posição mais baixa na árvore de handlers. Normalmente handlers em posição mais baixa na árvore são ativados em primeiro, contudo com o uso do atributo ev:phase="capture" pode-se fazer um handler em posição mais alta na árvore ser executado antes para um mesmo evento.

<p>
    <script ev:event="DOMActivate" ev:phase="capture" type="...">

        <!-- This handler will be done before any lower in the tree -->
        ...
    </script>
    ...
    <a href="...">...</a>
    ...
    <a href="...">...</a>

    ...
</p>

target

Se você define um elemento particular como alvo (target), então podemos estabelecer que aquele elemento unicamente dispara o evento:

<p>
    <script ev:event="DOMActivate" ev:target="img1" type="...">

        ...
    </script>
    ...
    <a href="..."><img id="img1" ... /><img id="img2" ... /></a>
</p>

(Lembre-se que atualmente o alvo é algo clicável, o que para nós não tem nenhum interesse particular.)

propagate ("stop" | "continue"*)

Handlers de evento são resolvidos na seguinte ordem: primeiro os handlers com ev:phase="capture", começando pelo mais alto na árvore e continuando para baixo pelos alvos do elemento pai, a seguir os demais handlers do elemento alvo em direção ao topo da árvore

Se algum handler tiver ev:propagate="stop" nenhum outro handler que se segue será evocado para o evento corrente.

<body>

    <script ev:event="DOMActivate" ev:propagate="stop" ev:phase="capture" type="...">
        <!-- This script is the only one that will respond to DOMActivate -->
        ...
    </script>
    ...
</body>

Acresente-se ainda que se houver mais de um handler para um mesmo evento em um elemento será indefinida a ordem em que eles serão executados.

defaultAction ("cancel" | "perform"*)

Muitos dos eventos tem uma ação default default action que é executada depois que todos os handlers de eventos da árvore são efetuados. Por exemplo; um clique em um botão ativa o botão, um clique <a> ou em um de seus filhos ativará um link . É possível inibir a ação default com o atributo ev:defaultAction="cancel".

<input type="submit" ...>
    <script ev:event="DOMActivate" ev:defaultAction="cancel" type="...">

        <!-- This script will be activated, but the default action will not be done -->
        ...
    </script>
</input>

(Isto é o que faz onclick="...; return=false;" no HTML4. Se você pretende fazer isto em eventos XML, você deverá chamar de forma apropriada o método DOM preventDefault.)

Conclusões

Esta introdução mostrou como o handler de evento funciona em XML. Conforme citado acima, á época atual não há versão de XHTML que suporte evento XML com scripts; XHTML2 está em fase de preparação . XForms usa evento XML (embora use seu próprio elemento <action> em lugar de <script>); outras linguagens que utilizam eventos XML são: XHTML+Voice (também conhecida como X+V), e SVG 1.2 (também em fase de preparação).