Neste post vamos montar pequenos exemplos com o método bind e para finalizar vamos ver alguns exemplos com o método unbind.

bind

O método bind registra eventos nos elementos HTML, ele é utilizado por boa parte dos métodos que tratam eventos, por exemplo, os métodos blur, focus,keydown, keypress e outros utilizam o bind, veja a lista completa de métodos que criam atalhos a partir do bind na documentação da framework http://api.jquery.com/bind/. O método bind recebe três parâmetros eventType,eventData e handler.

O parâmetro eventType: é obrigatório e defini o tipo do evento , eventData: parâmetro opcional que defini valores que serão passados como parâmetro para a função que vai tratar o evento, handler: parâmetro obrigatório que define a função que vai tratar o evento.

Exemplo 1: Evento sem parâmetro

$("#enviar").bind("click", function() {
    alert('Evento click!');
});

Exemplo 2: Evento com parâmetro

$("#enviar").bind("click",{mensagem: "evento click com parâmetro"}, function(evento) {
    alert(evento.data.mensagem);
});

Você pode adicionar múltiplos eventos com um bind, veja os exemplos abaixo.

Exemplo 3: Múltiplos eventos.

function handlerClick() {
    alert('Evento click!');
}

$("#divTeste").bind({
    click: handlerClick,
    mouseenter: function() {
        $(this).css("background", "red");
    },
    mouseleave: function() {
        $(this).css("background", "blue");
    }
});

Exemplo 4: Múltiplos eventos com parâmetro.

function handlerClickComParametro(evento) {
    alert(evento.data.mensagem);
}

$("#divTeste").bind({
    click: handlerClickComParametro,
    mouseenter: function() {
        $(this).css("background", "red");
    },
    mouseleave: function() {
        $(this).css("background", "blue");
    }
}, { mensagem: "click na div!" });

unbind

O método unbind remove eventos, ele recebe dois parâmetros eventType e handler.

O parâmetro eventType: é obrigatório e defini o tipo do evento, handler: parâmetro opcional que recebe a função que tratava o evento que será removido.

Exemplo 5: Remove o evento click

$("#evento").unbind('click');

Exemplo 6: Remove todos os eventos da div dos exemplos 3 e 4.

$("#divTeste").unbind();

Exemplo 7: Remove somente o evento click da div dos exemplos 3 e 4.

$("#divTeste").unbind("click", handlerClick);
$("#divTeste").unbind("click", handlerClickComParametro);

Registrar e controlar eventos com os método bind e unbind é muito fácil, mais fácil ainda é passar valores para as funções que tratam os eventos, fazer essas coisas simples com esforço mínimo é o que diferencia o JQuery das outras framework.

Daniel Fonseca Castro