Posts Tagged eventos

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