importante:
1 - O objeto $(e.target) aponta para o objeto que disparou o evento.
Portanto, para pegar o novo valor selecionado ou digitado do objeto fariamos $(e.target).val() entre outras funcionalidades.
2 - Se um evento esta sendo capturado pelo elemento janela(window) do DOM então o evento só será disparado enquanto ocorrer dentro da janela. Citando um exemplo, se capturamos o evento mousemove da janela ele só funciona enquanto o mouse estiver dentro da janela mas ao mover o mouse fora da janela ( por exemplo, no header do browser, na url por exemplo ) ele para de funcionar.
3 - Neste documento todo evento disparado será exibido com o fundo verde claro (exceto este parágrafo).
Os eventos que o JQuery podem ser gerados por 5 fontes:
1-DOM.
2-Formulário.
3-Janela.
4-Mouse.
5-Teclado.
Os eventos que podem ser tratados dessas origens são :
1-Eventos do DOM
O único evento que o DOM pode disparar é o evento onload.
1-onLoad : É um evento que ocorre quando o documento foi inteiramente carregado.
Abaixo se depois do : for exibida alguma mensagem ela foi posta pelo evento onload.
Resultado do teste Evento onload: ?
2-Eventos de formulário
O formulário pode disparar os eventos focus, blur, change, submit.
1-focus : É um evento que ocorre quando clicamos no elemento ou quando o documento foi carregado o elemento foi automaticamente selecionado por default.
Alguns objetos, como o input type text, só receberão os dados do teclado quando tiverem o foco.
Este evento é muito útil quando ao fazer uma verificação dos campos do formulário encontramos um erro e, além de exibir a informação de erro, já colocamos o foco no elemento com problema para que o usuário corrija.
Abaixo temos um teste do evento focus. Clique no input type text abaixo para que a mensagem seja disparada pelo evento focus. Resultado do teste do Evento focus: ?
importante: Algumas tags html ( como a div por exemplo ) não tem a elas associada o evento focus. Portanto, antes de tentar capturar esse evento temos que adicionar esse evento ao objeto.
2-blur : Este evento que ocorre quando retiramos o foco de um elemento.
Este evento é muito útil para fazer a verificação do conteúdo digitado.
Abaixo temos um teste do evento blur. Clique no input type text abaixo e depois clique em outro elemento do formulário para que a mensagem seja disparada pelo evento blur. Resultado do teste do Evento focus: ?
importante: Algumas tags html ( como a div por exemplo ) não tem a elas associada o evento focus nem blur. Portanto, antes de tentar capturar esse evento temos que adicionar esse evento ao objeto.
3-change : Este evento que ocorre quando alteramos o estado de um botão tipo radio, checkbox ou na mudança de opção de um select. importante: O evento change só funciona em algumas tags html. Provavelmente em algumas tags html não será possível adicionar esse evento e por esse motivo, nem disparam o evento.
Teste 1 : disparo do evento change num radio buttom.
Abaixo temos um teste do evento change. Clique/Deslique o radio button abaixo para que a mensagem seja disparada pelo evento change. Resultado do teste do Evento change (1): ?
Teste 2 : disparo do evento change num checkbox buttom.
Abaixo temos um teste do evento change. Clique/Deslique o checkbox button abaixo para que a mensagem seja disparada pelo evento change. Resultado do teste do Evento change (2): ?
Teste 3 : disparo do evento change num select box.
Abaixo temos um teste do evento change. Selecione um ou outro elemento para que a mensagem seja disparada pelo evento change. Motivo do contato:Resultado do teste do Evento change (3): ?
Teste 4 : disparo do evento change num input type text.
Abaixo temos um teste do evento change. Digite alguma coisa no campo para que a mensagem seja disparada pelo evento change do elemento. Resultado do teste do Evento change (4): ?
importante:
1-O evento change do campo input text box só é disparado quando ele perde o foco e não a cada tecla pressionada.
2-Se dermos o foco ao objeto input type text e não alterarmos nada e em seguida retirarmos o foco do elemento o evento change NÃO será disparado.
4-submit : Este evento ocorre quando desejamos enviar as informações de um form para um servidor.
Note que, obrigatóriamente para esta funcionalidade funcionar você precisa de enviar os dados a um servidor web que precisa receber os dados ( tipo asp, php). Não é possível enviar dados de uma página html para outra página html.
Importante :
1-O submit sempre será dado no form.
2-Sempre haverá o reload da página a menos que seja solicitada e.preventDefault();.
Abaixo temos um teste do evento submit. Clique no botão abaixo para que a mensagem seja disparada pelo evento submit.
3-Eventos de Janela
A janela pode disparar os eventos scroll e resize.
1-scroll : O Evento scroll ocorre quando utilizamos as barras verticais ou horizontais de uma janela ou elemento para deslocar a exibição do seu conteúdo.
1.1-Testando o evento de scroll pelo scroll da janela do Browser.
Esta página é alta e esta exibindo o scroll vertical porque seu conteúdo completo não cabe na altura atual do documento.
Abaixo temos um teste do evento scroll disparado pelo elemento window. Clique no scroll vertical da tela e desloque o conteúdo ou utilize a barra de rolagem do mouse. Resultado do teste do Evento scroll janela : ?
1.2-Testando o evento de scroll pelo scroll de um elemento-Select.
Desloque verticalmente ou horizontalmente do elemento select abaixo.
Basta clicar com o mouse na aba scroll vertical ou horizontal e deslocando a aba para disparar o evento scroll do elemento select abaixo.
Resultado do teste do evento Scroll do elemento Select: ?
2-resize : O Evento resize sempre que alteramos o tamanho de um elemento, como a janela.
Resultado do teste do Evento resize da Janela : ?
4-Eventos de Mouse
O mouse pode disparar os eventos mousedown, mouseup; click, dblclick, mousemove, mouseenter, mouseleave, mouseover, mouseout.
Abaixo está o elemento ( uma div ) que irá disparar os eventos que serão cujas mensagens serão colocadas nas caixas destinadas aos respectivos eventos.
Notas:
1-O evento MouseMove só funciona dentro do elemento que o evento ocorre.
2-Os eventos mouveenter e mouseleave são antigos e, por exemplo, para ocorrer o evento mouseenter em um elemento interno ocorre o evento mouseout do elemento mais externo, o evento mouseenter do elemento mais interno e depois o evento mouseenter do elemento mais externo.
Mas os eventos mousover e mouseout que já são mais modernos só são disparados uma vez e independente dos outros objetos.
5-Eventos de Teclado
O teclado pode disparar apenas dois eventos : KeyDown e Keyup.
Abaixo está o elemento ( um input ) que irá disparar os eventos cujas mensagens serão colocadas nas caixas destinadas aos respectivos eventos.
Evento KeyDown : ?
Evento KeyUp : ?
Importante : Se mantivermos a tecla pressionada pelo bios da máquina ela será repetidacontinuamente até que seja solta.
6-Associando Elementos a um Evento
Suponha que você tenha alguns elementos que disparam um evento e este evento pode ser tratado pelo mesmo código. Neste caso você pode unir os elementos colocando vírgulas entre eles.
Ex: $("#elem1,#elem2").click(
Abaixo estão dois elemento distintos que disparam o mesmo evento e são tratados pelo mesmo código. O evento escolhido foi o click.
Elemento 1
Elemento 2
Evento Click de Elementos associados: ?
7-Sequencia de designação
Para que o jQuery capture os eventos de um elemento é preciso que o elemento já exista para efeturar a associação.
Mas e se nós adicionarmos o elemento depois da associação do evento no jQuery? Ele simplesmente não será tratato.
O elemento a baixo teve a associação do evento click depois da sua criação e por isso funcionará normalmente:
Elemento 3
?
O elemento abaixo por sua vez teve a associação do evento depois da sua criação, portanto não funcionará.
Lógicamente a function document.ready foi retirada para permitir rodar o script antes que o elemento fosse criado:
Elemento 4
Se o evento click do Elemento 4 funcionar ele substituirá esta mensagem
8-Desligando e ligando eventos
Em algumas circustâncias podemos necessitar que um evento ocorra em determinada ocasião e em outra não.
o jQuery permite controlar os eventos de um elemento pelos comandos on / off.
Na realidade, o jQuery anexa ou retira o evento do elemento.
Clique nos botões abaixo para ligar ou desligar o evento click do elemento 5
Elemento 5
Importante : Ao desligar o evento qualquer definição anterior do evento no elemento é apagada.
Portanto, ao habilitar novamente o evento precisamos NOVAMENTE redefinir o evento (no jQuery) que foi desabilitado anteriormente.
Digamos que ao desligar o evento ele apaga o evento. Ao ligar o evento precisaremos definir a funcionalidade que o evento irá disparar porque o que estava definido anterior foi apagado.
