.bind () x .on () do jQuery

Encontrei dois ótimos artigos falando sobre a nova função .on(): jquery4u.com , elijahmanor.com .

Existe alguma maneira .bind()de usar o still ainda melhor .on()?

Por exemplo, eu tenho um código de exemplo que se parece com isso:

$("#container").click( function( e ) {} )

Você pode observar que apenas tenho um item recuperado pelo seletor e, no meu caso, o <div>nome #containerjá existe quando minha página foi carregada; não adicionado dinamicamente. É importante mencionar que eu uso a versão mais recente do jQuery: 1.7.2.

Para esse exemplo, deve .on()ser usado em vez de, .bind()mesmo que eu não use os outros recursos fornecidos pela .on()função?

Internamente, .bindmapeia diretamente para .ona versão atual do jQuery. (O mesmo vale para isso .live.) Portanto, há um desempenho pequeno, mas praticamente insignificante, se você o usar .bind.

No entanto, .bindpode ser removido de versões futuras a qualquer momento. Não há razão para continuar usando .binde todas as razões para preferir .on.

Todos esses trechos executam exatamente a mesma coisa:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

No entanto, eles são muito diferentes destes, que executam a mesma coisa:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

O segundo conjunto de manipuladores de eventos usa a delegação de eventos e funcionará para elementos adicionados dinamicamente. Manipuladores de eventos que usam delegação também têm muito mais desempenho. O primeiro conjunto não funcionará para elementos adicionados dinamicamente e é muito pior para o desempenho.

A on()função do jQuery não introduz nenhuma nova funcionalidade que ainda não existia, é apenas uma tentativa de padronizar a manipulação de eventos no jQuery (você não precisa mais decidir entre viver, vincular ou delegar).

Os métodos diretos e .delegatesão APIs superiores .one não há intenção de depreciá-los.

Os métodos diretos são preferíveis, porque seu código será menos digitado. Você receberá um erro imediato ao digitar incorretamente o nome de um evento, em vez de um bug silencioso. Na minha opinião, também é mais fácil escrever e ler do clickqueon("click"

O .delegateé superior a .onpor causa da ordem do argumento:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Você sabe imediatamente que é delegado porque, bem, diz delegado. Você também vê instantaneamente o seletor.

Com .onisso, não está claro imediatamente se ele é delegado e você deve procurar no final o seletor:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Agora, a nomeação de .bindé realmente terrível e tem um valor nominal pior que .on. Mas .delegatenão é possível realizar eventos não delegados e há eventos que não possuem um método direto; portanto, em um caso raro como esse, ele poderia ser usado, mas apenas porque você deseja fazer uma separação limpa entre eventos delegados e não delegados.

Se você procurar no código-fonte, $.fn.bindverá que é apenas uma função de reescrita para on:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Na documentação do jQuery:

A partir do jQuery 1.7, o método .on () é o método preferido para anexar manipuladores de eventos a um documento. Para versões anteriores, o método .bind () é usado para anexar um manipulador de eventos diretamente aos elementos. Os manipuladores são anexados aos elementos atualmente selecionados no objeto jQuery, portanto esses elementos devem existir no momento em que a chamada para .bind () ocorre. Para uma associação de eventos mais flexível, consulte a discussão sobre delegação de eventos em .on () ou .delegate ().

http://api.jquery.com/bind/

A partir do Jquery 3.0 e posterior, o .bind foi descontinuado e eles preferem usar .on. Como o @Blazemonger respondeu anteriormente, ele pode ser removido e é certo que será removido. Para as versões mais antigas, o .bind também chamaria .on internamente e não há diferença entre elas. Consulte também a API para obter mais detalhes.

Documentação da API jQuery para .bind ()