Na Biblioteca jQuery existe uma seção Event Handler Attachement que trata das funções que permitem vincular um manipulador de eventos a um determinado elemento, desvincular um manipulador de eventos de um elemento, disparar um evento.
É bastante produtivo conferir o Object Event Event Object para avaliar seus atributos e funções. Dentro desse objeto estão informações de qual a posição do cursor quando um evento acontece. Existe funções que permitem paralisar a propagação de um evento dentro dos elementos da árvore. Qual o tipo de evento, quando o evento ocorreu. Permite também identificar qual o alvo do evento. Exemplo, se um link aponta para www.adalgisa-souza.com, o alvo é essa url.
Nesse código um elemento do tipo input text foi capturado. Vinculado ao evento keyup desse elemento está a função que recupera com o
do elemento, colocando-o dentro da div com id msg. Veja o efeito preenchendo o campo Text, do formulário no topo dessa página. Enquanto
o campo está sendo preechido o texto vai aparecendo na div cinza:
No javaScript:
$(document).ready(function(){
$(":text").keyup(function(e){
$("#msg").text($(this).val());
});
});
O código seguinte, usando a função bind, produz o mesmo resultado que o código anterior.
No javaScript:O código abaixo, usando a função unbind, desvincula o evento quando o botão é clicado. Experimente digitar no campo Text e depois clicar em button. A digitação continua, mas na div não entra mais texto. O evento unbind desvincula como já foi dito, o evento keyup do manipulador de eventos. Mas ao clicar fora do campo, o texto volta a ser incluído na div.
No javaScript:A função trigger permite disparar um evento. O evento focus está sendo manipulado pela função msg. O que será feito através do javaScrip é disparar o evento focus usando a função trigger. Quando ele for disparado vai acionar o manipulador de eventos msg, que vai copiar o texto para dentro do campo, colocando dentro da div de mensagem. Clique em button para ver o efeito.
Resumindo: A trigger serve para forçar o disparo de um evento, que esteja vinculado a um determinado elemento, na árvore do documento. Sem nenhum tipo de interação por parte do internauta.
No javaScript:Lembrete: A função bind vincula eventos ao elemento encontrado através do seletor. Este vínculo vale apenas para os elementos que existem na árvore. Se um novo elemento for criado na árvore, mesmo sendo do tipo input text, a ele não serão vinculados os manipuladores de eventos. Clique em button, depois faça o teste escrevendo nos dois campos.
No javaScript:A função delegate é usada no lugar de bind quando for preciso que um conjunto de elementos dentro de um determinado elemento, receba um conjunto de eventos e manipule esses eventos com uma função. Ou seja todos os campos receberão os eventos keyup, manipulados pela função msg. Clique em button e veja todos os campos em funcionamento, à medida que vão sendo criados.
No javaScript: