Eventos

Olá pessoal, estou aqui de novo para postar mais um aula pra vocês!

A aula de hoje é Eventos!

O que é evento ?
é simplesmente uma determinada ação …

no Javascript puro aplicamos assim :

<div id=links>
<a href=javascript:; onclick="minhafuncao()"> clique aqui</a>
</div>

Ao você clicar ele realizará a função de nome “minhafuncao”. essa função mostra a <div id=divdafuncao>.

Beleza! Mas iremos mostrar é no jquery. como que se faz ?
primeiro passo é tomar uma referência de onde você está (vamos supor que só tenha esse link na <div id=links>) então faremos assim:

<script>
$(document).ready(function(){
$('#links a').click(function(){ // aqui selecionamos a tag "a" dentro da div id=links e quando clicarmos realizará a função..
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
});
});
</script>

Então qual é a vantagem ?
a vantagem é que seu código ficará muito mais organizado e você não vai mais precisar encher seu HTML de comandos javascript, que deixa a pagina mais pessada e esse códigos atrapalha muito na hora da programação dinâmica. Pois como vimos no código, nós selecionamos pelo jQuery que suporta o “Xpath do CSS”  quase que por inteiro (*Ainda terá um artigo só sobre isso)!

Evento .hover – Se lembra do onMouseOver e onMouseOut ?

então vamos ver direto no exemplo para facilitar:

<script>
$(document).ready(function(){
$("#links a").hover(function(){ //primeira function -> onMouseOver
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
},function(){ // segunda function -> onMouseOut
$('#divdafuncao').hide('slow'); // escondendo a id=divdafuncao !
});
});
</script>

Evento .toggle
É idêntico ao .hover só difere pois o toggle utiliza o click para mudar para a segunda function.

<script>
$(document).ready(function(){
$("#links a").toogle(function(){ // Primeiro click
$('#divdafuncao').show('slow'); // mostrando a id=divdafuncao !
},function(){ // segundo Click
$('#divdafuncao').hide('slow'); // escondendo a id=divdafuncao !
});
});
</script>

E para outros eventos utilizamos o .bind

$('#links a').bind("mousemove", function(){ // quando mover o mouse
$('#divdafuncao').show('slow');
});

Todos ou eventos com o .bind:
blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

é pessoal, por hoje é só !

Vou deixar uma demontração on-line para vocês tirarem suas dúvidas. aqui:
>> DEMONSTRAÇÃO AQUI!<<
Outro bom link para consulta:
http://docs.jquery.com/Events