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:

• o nome do evento é rigidamente estabelecido pela linguagem do script, em lugar de ser um parâmetro que possa ser introduzirudo em um atributo capaz de definir um evento como um atributo onflash para um evento denominado flash.
• o nome do evento é usualmente muito específico ao hardware tal como é click, quando na verdade não interessa como um botão é ativado mas sim, se, ele foi ativado.
• Você está restrito ao uso de uma só linguagem de script (uma vez que você não pode ter dois atributos chamados onclick, um para JavaScript e um para VB)
• Handlers de eventos e marcação são associados— não há como separá-los.

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).

Copyright ©2004 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.