Home
índice
Página anterior

Formulário
Text
Select:


Manipuladores de Eventos Avançados

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.

Avaliação de um trecho de código

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());
});
});

Função Bind

O código seguinte, usando a função bind, produz o mesmo resultado que o código anterior.

No javaScript:
$(document).ready(function(){
$(":text").keyup(msg).focus(msg).blur(msg); //sintaxe sem usar a função bind.
$(":text").bind("keyup", function(e){ //sintaxe com a função bind.
$("#msg").text($(this).val());
});
});

Função unbind

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:
$(document).ready(function(){
function msg(e){
$("#msg").text($(this).val());
}
$(":text").bind("keyup focus blur", msg);
$(":button").bind("click", function() {
$(":text").unbind("keyup", msg);
});
});

Função Trigger

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:
$(document).ready(function(){
function msg(e){
$("#msg").text($(this).val());
}
$(":text").bind("keyup focus blur", msg);
$(":button").bind("click", function() {
$(":text").unbind("keyup", msg);
$(":text").val("Texto incluído via jQuery"); //novo valor para o texto
$(":text").trigger("focus");
});
});

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:
$(document).ready(function(){
function msg(e){
$("#msg").text($(this).val());
}
$(":text").bind("keyup focus blur", msg);
$(":button").bind("click", function() {
$("fieldset").prepend("Text2: <input type='text' name='text2'/>");
});
});

Função Delegate

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:
$(document).ready(function(){
function msg(e){
$("#msg").text($(this).val());
}
// $(":text").bind("keyup focus blur", msg);
$("fieldset").delegate(":text", "keyup", msg);
$(":button").bind("click", function() {
$("fieldset").prepend("Text2: <input type='text' name='text2'/>");
});
});

Recebendo Vários Parâmetros

No javaScript: