Trabalhar com eventos no JavaScript nem sempre \u00e9 uma tarefa f\u00e1cil. H\u00e1 momentos que precisamos retirar um evento de um elemento ou adicionar um evento a determinado elemento HTML. Vou mostrar duas fun\u00e7\u00f5es de manipula\u00e7\u00e3o de eventos para os elementos ou seletores selecionados. Estou me referindo aos m\u00e9todos .on() e .off(). Neste artigo vou mostrar uma breve introdu\u00e7\u00e3o a estes dois manipuladores e como resolver algumas dificuldade frequentes de quem trabalha com JavaScript.<\/p>\n
Trabalhar com esses m\u00e9todos de associa\u00e7\u00e3o de eventos \u00e9 realmente f\u00e1cil de adicionar um evento que n\u00e3o est\u00e1 mais \u201couvindo\u201d seu JavaScript. Da mesma forma \u00e9 f\u00e1cil para remover o evento de um elemento. Voc\u00ea pode querer adicionar um evento ou retirar um evento de um elemento que foi criado depois da p\u00e1gina carregar. .on(), .off() e namespaces v\u00e3o lhe ajudar.<\/p>\n
Imagine que voc\u00ea tenha o c\u00f3digo HTML abaixo:<\/p>\n
\r\n<body>\r\n <h2>Adicionar itens<\/h2>\r\n <input type="text" name="checkListItem" id="inpudAdd"\/>\r\n <button id="button">OK<\/button>\r\n <div class="boxLista"><\/div>\r\n<\/body>\r\n<\/pre>\nE o seguinte c\u00f3digo jQuery<\/p>\n
\r\n$('#button').click(function(){\r\n var textAdd = $('#inpudAdd').val();\r\n $('#inpudAdd').val('');\r\n $('.boxLista').append('<div class="item">' + textAdd + '<\/div>');\r\n});\r\n<\/pre>\nBom, n\u00e3o precisamos entender muito de jQuery para entender o que o c\u00f3digo acima faz. Resumindo: O usu\u00e1rio digita um texto no input, clica em ok, o texto \u00e9 adicionado em uma div.
\nCaso o usu\u00e1rio queira exclui o texto clicando sobre a linha podemos adicionar a seguinte linha de c\u00f3digo:<\/p>\n\r\n$(document).on('click', '.item', function(){\r\n $(this).remove();\r\n});\r\n<\/pre>\nNum primeiro momento muitos s\u00e3o capazes de dizer que isso funciona. A verdade \u00e9 que isso n\u00e3o vai funcionar. Essa \u00e9 uma d\u00favida muito comum por quem est\u00e1 come\u00e7ando com JavaScript: \u201cPor que meus eventos n\u00e3o funcionam quando clico em elementos criado ap\u00f3s o carregamento da p\u00e1gina.<\/strong>\u201d A resposta \u00e9 simples. Ao carregar a p\u00e1gina a biblioteca jQuery \/Javascript procura por todos os elementos quando o DOM \u00e9 carregado. Quando seu documento estiver pronto a biblioteca j\u00e1 ter\u00e1 decidido que n\u00e3o h\u00e1 uma classe chamada \u201c.item\u201d para ser removida com a m\u00e9todo .remove(), e seu script n\u00e3o vai funcionar. <\/p>\n
A maioria dos c\u00f3digos JavaScript \u00e9 acionado a partir de um evento. A p\u00e1gina \u00e9 carregada, voc\u00ea pressiona uma tecla, clica em um bot\u00e3o, etc. Tudo isso s\u00e3o eventos.<\/p>\n
Manipulador de eventos on()<\/h2>\n
Para resolver o problema descrito vamos usar o manipulador de evento .on() que nos permite lidar com a manipula\u00e7\u00e3o do DOM em tempo real. O m\u00e9todo .no () fornece todas as funcionalidades necess\u00e1rias para anexar manipuladores de eventos. Ele funciona como um manipulador geral de eventos que pega o evento, seu seletor, e uma a\u00e7\u00e3o a ser disparada. Exemplo da sintaxe .on() \u00e9 algo como:<\/p>\n
\r\n$(document).on('event', 'selector', function() {\r\n Realize Alguma Coisa!\r\n});\r\n<\/pre>\nTraduzindo essa sintaxe para o nosso problema ter\u00edamos o seguinte c\u00f3digo:<\/p>\n
\r\n$(document).on('click', '.item', function(){\r\n $(this).remove();\r\n});\r\n<\/pre>\n