Índice
Desde a versão 1.7 do jQuery temos o método on (), que nos oferece todas as funcionalidades necessárias para gerenciar eventos. Graças a este método, não precisamos mais do antigo bind (), live () ou delegate (), mas também não precisamos de blur (), focus (), click (), hover () e outros.
Assim como há on (), temos seu oposto, off (), que remove os eventos atribuídos com on ().
Veremos uma série de exemplos para entender melhor o método on ().
Suponha que queremos executar uma função quando um botão é clicado:
(function () {$ ('botão'). click (function () {// código a ser executado});}) ();É como faríamos tradicionalmente com click (). Mas se olharmos para o código jQuery, veremos que o que está realmente acontecendo é que o método on () está sendo chamado, então a coisa mais rápida a fazer é:
(function () {$ ('botão'). on ('clique', função () {// código a ser executado});}) ();Esta é a rota mais direta. E o mesmo para outros métodos como change (), hover (), mouseenter (), etc … (na verdade hover () o que ele faz é chamar mouseenter () e mouseleave () que por sua vez chamam o método on ()
Vamos dar uma olhada em jQuery. Se baixarmos a versão 1.7 ou superior e olharmos seu código, veremos o seguinte:
jQuery.each (("blur focus focusin focusout load resize scroll descarregar clique dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu"). split (""), f function (i, name) {// Lidar com a associação de eventos jQuery.fn [nome] = função (dados, fn) {if (fn == nulo) {fn = dados; dados = nulo;} argumentos de retorno. Comprimento -> 0? This.on (nome, nulo, dados, fn): this.trigger (nome);};A partir daqui, estamos apenas interessados em ver que os métodos “desfocar, focar, focusin, focusout, load, resize, scroll, unload, click, dblclick, mouseedown, mouseup, mouseup, mouseover, mouseover, mouseout, mouseenter, mouseeleave, alterar, selecionar, submit, keydown, keypress, keyup, error e contextmenu "no final tudo termina em" this.on (name, null, data, fn) ".
vincular (), viver () e delegar ()
No passado, também era feito:
(function () {$ ('botão'). bind ('click', function () {// código a ser executado quando o botão é clicado});}) ();Ou se quisermos que o evento funcione mesmo depois de adicionar novos elementos de "botão" ao documento, usaremos o método live ():
(function () {$ ('botão'). live ('clique', função () {// código a ser executado quando o botão é clicado});}) ();Posteriormente, o jQuery introduziu "delegate ()", que nos permitiu atribuir um evento a um contexto. Por exemplo, se o botão está (ou será, se for adicionado posteriormente) dentro de uma div com a classe "contêiner":
(function () {$ ('div.container'). delegate ('botão', 'clique', função () {// código a ser executado quando o botão é clicado});}) ();Mas como com os anteriores, ambos bind (), live () ou delegate () tudo o que fazem é chamar o método on ().Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
