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:

javascript$(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:

javascript$(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:

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

javascript$('#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:

html<p>clique</p>

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

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

Veja também