Delegando e removendo eventos com .on() e .off()

O jQuery dispões de várias formas para se delegar um evento, porém a forma mais recomendada pelo jQuery Team é o .on().

Até a versão 1.7 da biblioteca você poderia usar o método .bind() para delegar eventos para elemento no DOM e o método .live() para delegar eventos para elementos que fossem colocados na árvore DOM posteriormente à utilização do método.

Com a chegada de jQuery 1.7 veio o método .on() que pode fazer os dois tipos de delegação de forma muito eficiente.

Para isso, basta escapsular o elemento alvo, chamar o método .on() e passar como parâmetros respectivamente o tipo de evento, e a função a ser chamada.

Exemplo:

$('a').on('click', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM (Equivalente a .bind()).

Mas e se eu inserir uma âncora após essa delegação?

É simples, o método .on() pode aceitar um seletor como segundo parâmetro para filtrar o primeiro seletor e a função a ser chamada é passada como terceiro parâmetro. Por tanto você pode encapsular o próprio documento, pois este sempre estará no DOM e então filtrar para o seletor que você desejar.

Exemplo:

$(document).on('click', 'a', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM e também para todas as âncoras que forem inseridas dentro do document posteriormente (Equivalente ao .live()).

Você também pode declarar mais de um evento para chamar uma mesma função separando o tipo de evento por espaços.

Exemplo:

$('a').on('mouseenter focusin', function() {
	$(this).addClass('hover');
});

E pode declarar mais de um evento com funções distintas se você usar um objeto.

Exemplo:

$('a').on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {

		$(this).removeClass('hover'); 
	}
});

Ou no caso de âncoras inseridas posteriormente no DOM:

$(document).on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {
		$(this).removeClass('hover'); 
	},
	click : function(event) {
		event.preventDefault();
	}
}, 'a');

Também no jQuery 1.7 o método .off() foi implementado com o objetivo de remover eventos de elementos no DOM. Você pode tanto remover todos os eventos sem passar nenhum parâmetro quanto pode remover um evento em específico passando o tipo de evento como parâmetro.

Exemplo:

// Remove todos os eventos das âncoras no DOM.
$('a').off();
// Remove apenas o evento "submit" de todos os formulários no DOM.
$('form').off('submit');

Gostou ou tem algo a acrescentar? Então não esqueça de comentar ^^!