Método on

O método on permite adicionar um manipulador de eventos a um elemento. Para remover o manipulador, você pode usar o método off. Para que o evento seja acionado apenas uma vez e, em seguida, o manipulador se remova automaticamente - use o método one. Os elementos aos quais vinculamos o manipulador devem existir no momento da chamada de on.

Sintaxe

Desta forma, adicionamos um manipulador de eventos a um elemento. Como primeiro parâmetro, é passada uma string com um ou mais eventos separados por espaços. O segundo parâmetro é um seletor filtrador opcional de descendentes dentro do elemento. O terceiro são dados adicionais, que são passados para o manipulador na propriedade event.data quando o evento é acionado. O segundo e o terceiro parâmetros são opcionais. O quarto é a função manipuladora, à qual é passado o objeto de evento e parâmetros adicionais opcionais. Se false for passado em vez da função manipuladora, então a função simplesmente retornará false:

$(seletor).on(eventos, [seletor], [dados], função-manipuladora(objeto evento, [parâmetros adicionais]));

Você pode usar o método on de outra forma. Neste caso, o primeiro parâmetro é um objeto JavaScript, onde as chaves são o tipo de evento e os valores são as funções manipuladoras, chamadas para os eventos:

$(seletor).on({'tipo de evento': handler}, [seletor], [dados]);

Se não passarmos um seletor adicional, o evento é acionado no elemento ao qual anexamos o manipulador. Caso contrário, no elemento descendente que corresponde a esse seletor (eventos delegados). O mesmo manipulador de evento pode ser vinculado a um elemento várias vezes.

Exemplo

Vamos exibir em um alert o texto do parágrafo com #test quando clicarmos nele. Cliques em outros parágrafos não farão nada:

<p>texto1</p>
<p id="test">texto2</p>
<p>texto3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Exemplo

Vamos exibir os dados que passamos para o método on ao clicar em um parágrafo. Usaremos a função manipuladora testFunc que criamos:

<p>clique</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Veja também

método off,
que permite remover um manipulador de eventos de um elemento
método one,
que permite que um evento seja acionado uma vez, e então remove automaticamente o manipulador
objeto event,
que contém informações sobre o evento
método trigger,
que permite acionar todos os manipuladores de eventos, vinculados a um elemento para eventos de um tipo específico
Método JavaScript bind,
que permite vincular um contexto a uma função