Skripta OVI

JQuery – události

Události

Dokáží zachytit určité chování objektů.

Události se zapisují takto:

$(element).událost(function(){
	 co se má vykonat, když se událost stane	 	
	})

Typy událostí:

  • ready – dokument (nebo objekt) se načetl

příklad:

$(document).ready(function(){
             /*co se má vykonat*/
   })
  • click – kliknutí myši

příklad:

$("#tlacitko").click(function(){
       /* co se má vykonat */  })

Jiný typ zápisu události pomocí „bind“:

$("#tlacitko").bind("click", function(){
      /*co se má vykonat*/
      })

Můžeme adresovat objekt pomocí „this“. příklad:

$("p").bind("click", function(){
      $( this ).toggle(200);
      })

Další typy událostí:

  • dblclick – double click, dvojklik
  • mouseenter – nájezd myši
  • mouseleave – sjezd myši
  • hover – registruje myš nad objektem a její sjetí
  • mousedown – stisknutí myši
  • mousemove – pohyb myši nad objektem
  • mouseout – sjetí myši z objektu
  • mouseover – myš nad objektem

Adresování událostí

bind – umožní registrovat různé typy událostí – dva parametry – even type (String) – jaký typ události se má registrovat, + funkce, která se má vykonat

$(document).ready(function(){
	#("tlacitko").bind("click", function(){
	$("p").toggle(2000);
	})
})

Nejnámější typy událostí:

  • click
  • dblclick
  • hover
  • mousedown
  • mouseup
  • mouseenter
  • mouseleave
  • mousemove
  • keydown
  • keyup
  • keypress
  • submit
  • resize

Odkazování na objekt, kde událost vznikla:

$(this)

Příklad – změna barvy textu po najetí myši:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Karel jede na kole</title>
<style>
.on{
	color:lime;
}
</style>

<script src="jquery-1.10.2.min.js"></script>
<script>
 $(document).ready(function(){
 
	$("p").hover(function(){
	    $(this).addClass("on");}, function(){
         	$(this).removeClass("on");})
})
	
</script>
</head>
<body>
	<p> Text na schování. </p>
	<button id="tlacitko">schovej/zobraz</button>	
</body>
</html>

Metoda each – spustí funkci pro všechny prvky nějakého elementu

příklad: vypíše text podle kteréhokoliv vybraného elementu z výběrového nástroje:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script src="jquery-1.10.2.min.js"></script>
<script>
 $(document).ready(function(){
 	$("select").change(function(){
		var str = "";
 		$("select option:selected").each(function(index, element){
 			str += $(this).text() + " ";	
 		});
 		$("#vyber").text(str);
 	});
 })
	
</script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>čokoláda</option>
<option>marcipán</option>
<option>žužu</option>
</select>
<p id="vyber"></p>
</body>
</html>

admin