Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 5
Tutorial para Saber como Utilizar os Eventos mousedown() e mouseup()

O Evento mousedown()
O m�todo mousedown() adiciona uma fun��o de manipulador de eventos a um elemento HTML. Esta fun��o � executada, quando o bot�o esquerdo do mouse for pressionado no momento em que o mouse estiver sobre o elemento HTML.
Este evento � geralmente usado em conjunto com o evento mouseup().
Sintaxe:
$ (seletor).mousedown ()

Ele aciona o evento mousedown aos elementos selecionados.
$ (seletor).mousedown (fun��o)

Ele adiciona uma fun��o ao evento mousedown.
Par�metros do evento mouseenter()

Vejamos um exemplo para demonstrar como funciona o evento mousedown():
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#h1").mousedown(function(){ $( "div" ).text( "Evento mousedown disparado." ).show().fadeOut(2000); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <h1 id="h1">Clique sobre esta mensagem.</h1> <div></div> </body> </html>
Resultado:
Nesse caso, quando o bot�o esquerdo do mouse for clicado sobre a mensagem, ser� mostrada uma segunda mensagem logo abaixo, que desaparecer� em alguns segundos, devido ao efeito fadeOut():

>

O Evento mouseup()
O m�todo mouseup() adiciona uma fun��o de manipulador de eventos a um elemento HTML. Esta fun��o � executada, quando o bot�o esquerdo do mouse for liberado ap�s ser pressi-onado o bot�o do mouse no elemento HTML.
O evento mouseup() ocorre quando voc� solta o bot�o pressionado do mouse sobre um elemento selecionado. Depois que o evento mouseup() ocorre, ele executa o m�todo mouseup() anexado a uma fun��o a ser executada.
Este evento � geralmente usado junto com o evento mousedown().
Sintaxe:
$ (seletor) .mouseup ()

Ele dispara o evento mouseup para os elementos selecionados.
$ (seletor) .mouseup (fun��o)

Ele adiciona uma fun��o ao evento mouseup.
Par�metros do evento mouseenter()

Vejamos um exemplo para demonstrar como funciona o evento mouseup():
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#h1").mouseup(function(){ $( "div" ).text( "O evento mouseup foi disparado." ).show().fadeOut(3000); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <h1 id="h1">Clique nessa mensagem.</h1> <div></div> </body> </html>
Resultado:
Nesse caso, quando o bot�o esquerdo do mouse for clicado sobre a mensagem nada acontecer�, somente quando o bot�o for liberado � que aparecer� uma segunda mensagem logo abaixo, que desaparecer� em alguns segundos, devido ao efeito fadeOut():

Vejamos um outro exemplo:
Nesse exemplo vamos utilizar ambos os eventos no mesmo c�digo, de forma que, quando o bot�o do mouse for clicado um evento ser� disparado, e quando o bot�o do mouse for liberado outro evento ser� disparado.
Vejamos ent�o um exemplo para demonstrar como funcionam os eventos mousedown() e mouseup() no mesmo c�digo:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").mousedown(function(){ $("p").css("background-color", "lightblue"); }); $("p").mouseup(function(){ $("p").css("background-color", "lightgreen"); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Pressione e libere o botao do mouse sobre esta mensagem.</p> </body> </html>
Resultado:
Nesse caso, quando o bot�o esquerdo do mouse for clicado sobre a mensagem a cor de fundo do texto ficar� azul claro, e quando o bot�o for liberado a cor de fundo ficar� verde claro:

<< Tutorial para Saber como Utilizar o Evento hover()
Tutorial para Saber como Utilizar os Eventos mouseover() e mouseout() >>