Posts Tagged js

Eventos com jQuery

Postado por Danilo in jQuery em 29 de setembro de 2009

O que é um evento?

Para utilizar jQuery é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.

Exemplos:

.click

O evento .click é processado quando clicamos em um elemento. Ex.: Clique aqui!

$(document).ready( function () {
   	$("#elemento-click").click( function() {
		alert("Você clicou aqui!");
   	});   		
});
.change

O evento .change é processado quando um elemento muda de valor.

$(document).ready( function () {
   	$("#elemento-change").change( function () {
		alert("Você mudou o valor do elemento");
   	}); 		
});
.select

O evento .select é processado quando um texto existente em um elemento é selecionado.

$(document).ready( function () {
   	$("#elemento-select").select( function () {
   		alert((document.all) ? document.selection.createRange().text : this.value.substring(this.selectionStart, this.selectionEnd));
   	});   		
});
.focus

O evento .focus é processado quando um elemento recebe foco.

$(document).ready( function () {
	$("#elemento-focus").focus( function () {
		alert("elemento ganhou foco!");	
	});
});
.blur

O evento .blur é processado quando um elemento perde o foco.

$(document).ready( function () {
	$("#elemento-blur").blur( function () {
		alert("elemento perdeu o foco!");
	}); 
});
.keydown

O evento .keydown é processado quando é pressionado alguma tecla.

$(document).ready( function () {
	$("#elemento-keydown").keydown( function (event) {
		alert(event.keyCode);
	}); 
});
.keyup

O evento .keyup é processado quando uma tecla deixa de ser pressionada.

$(document).ready( function () {
	$("#elemento-keyup").keyup( function (event) {
		alert(event.keyCode); 
	}); 
});
.mouseover

O evento .mousover é processado quando passamos o mouse sobre um elemento.

$(document).ready( function () {
	$("#elemento-mouseover").mouseover( function () {
		alert("O rato entrou"); 
	});
});
.mouseout

O evento .mouseout é processado quando tiramos o mouse de cima do elemento .

$(document).ready( function () {
	$("#elemento-mouseout").mouseout( function () {
		alert('O rato saiu'); 
	});	
});
.submit

O evento .submit é processado quando o formulário é submetido.

$(document).ready( function () {
	$("#elemento-submit").submit( function () {
		alert('formulário submetido');
		return false; 
	});	
});
.load

O evento .load é processado quando um elemento termina de ser carregado.

$(document).ready( function () {
	$("body").load( function () {
		alert("elemento carregado!");
	});
});

Mais eventos podem ser encontrados em: jQuery Events.

, , , ,

3 Comentários

Manipulando Eventos com Javascript

Postado por Danilo in jQuery, outros em 24 de setembro de 2009

O que é um evento javascript?

Eventos são ações que os usuários produzem nas páginas, quando um usuário visita uma página e interage (clicando, digitando algo, movendo o rato, etc.), ele está produzindo eventos.

Com eventos podemos produzir o lado “mágico” do Javascript, pois utilizando somente HTML, o único evento que conhecemos é quando clicamos em um link e ele abre outra página Web.

Os eventos Javascript, associados as funções, aos métodos e aos formulários, abrem uma grande
porta de interatividade das páginas.

Eventos e exemplos:

onclick

O evento onclick é processado quando clicamos em um elemento. Ex.: Clique aqui!

<a href="javascript:void(0);" onclick="alert('Você clicou aqui!')">Clique aqui!</a>
onchange

O evento onchange é processado quando um elemento muda de valor.

<select name="campo" onchange="alert('Você mudou o valor do elemento');">
   <option value="1">Alterar</option>
   <option value="2">Escolher esse!</option>
</select>
onselect

O evento onselect é processado quando um texto existente em um elemento é selecionado.

<textarea onselect="alert((document.all) ? document.selection.createRange().text : this.value.substring(this.selectionStart, this.selectionEnd));">Danilo Borges Pereira</textarea>
onfocus

O evento onfocus é processado quando um elemento recebe foco.

<input type="text" onfocus="alert('elemento ganhou foco!')" />
onblur

O evento onblur é processado quando um elemento perde o foco.

<input type="text" onblur="alert('elemento perdeu o foco!')" />
onkeydown

O evento onkeydown é processado quando é pressionado alguma tecla.

<input type="text" onkeydown="alert(event.keyCode);" />
onkeyup

O evento onkeyup é processado quando uma tecla deixa de ser pressionada.

<input type="text" onkeyup="alert(event.keyCode);" />
onmouseover

O evento onmousever é processado quando passamos o mouse sobre um elemento.

<input type="text" onmouseover="alert('O rato entrou');" />
onmouseout

O evento onmouseout é processado quando tiramos o mouse de cima do elemento .

<input type="text" onmouseout="alert('O rato saiu');" />
onsubmit

O evento onsubmit é processado quando o formulário é submetido.

<form onsubmit="alert('formulário submetido'); return false;">
   <input type="submit">
</form>
onload

O evento onload é processado quando um elemento termina de ser carregado.

<body onload="alert('Página carregada');">
</body>

Mais eventos podem ser encontrados em: w3schools.

, , ,

4 Comentários