Kcko
9/16/2015 - 9:07 AM

Use event with function and data // ukazka pouziti eventu, funkce, data

Use event with function and data // ukazka pouziti eventu, funkce, data

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>TEST</title>
	<script src="jquery.js"></script>
	<style>
	


	</style>
</head>
<body>




<div id="result"></div>


<button id="button1" data-color="red">Červené</button>
<button id="button2" data-color="green">Zelené</button>




<script>

//------------------------------------------------------------
//1 zpusob - data atribut
$('button').on('click', function(){

	$("#result").text($(this).text()).css("color", $(this).data('color'));
});




//------------------------------------------------------------
//2 zpusob - vlastni funkci
var handler = function(text, color) {

	$("#result").text(text).css("color", color);
};

$('#button1').on('click', function(){
	handler('Červené', 'red'); // misto Červené muzu pouzit $(this).text(), ale demonstruji ukazku parametru viz dale
});

$('#button2').on('click', function(){
	handler('Zelené', 'green'); // misto Červené muzu pouzit $(this).text(), ale demonstruji ukazku parametru viz dale
});


//------------------------------------------------------------
//3 zpusob - vlastni funkci ale ne pomoci anonymni, ale trosku ugly
var handler = function(text, color) {

	return function() {

		$("#result").text(text).css("color", color);
	}
};

$('#button1').on('click', handler('Červené', 'red'));
$('#button2').on('click', handler('Zelené', 'green'));


//------------------------------------------------------------
//4 zpusob pres user data / bindovani / trigger
$("button").on("setColor", function(e, color, txt){

	$("#result").text(txt).css("color", color);

});

$("#button1").on("click", function(){

	$(this).trigger("setColor", ['red', 'Červené']);
});

$("#button2").on("click", function(){

	$(this).trigger("setColor", ['green', 'Zelené']);
});



//------------------------------------------------------------
//5 event data
var handler = function(e) {
	
	$("#result").text(e.data.text).css("color", e.data.color);
	
};

$("#button1").on("click", {text:'Červené', color:'red'}, handler);
$("#button2").on("click", {text:'Zelené', color:'green'}, handler);



//------------------------------------------------------------
// 6 event, ale ne v data ale rovnou do e.nazev
$("#button1").on("click", function(e){
	$("#result").text(e.text).css("color", e.color);
});

$("#button1").trigger({type:'click', text:'Červené', color:'red'});




//------------------------------------------------------------
// 7 $.event object, vlastni data soucasti eventu, @link: https://jsbin.com/memoriyate/edit?html,js


$('body').on('logged logged2', function(e) {

	console.log(e);
});

// 1 moznost
var event = jQuery.Event( "logged" );
event.user1 = "a";
event.pass1 = "b";
$( "body" ).trigger( event );

// 2 moznost
$( "body" ).trigger({
  type:"logged2",
  user:"a2",
  pass:"b2"
});



</script>

</body>
</html>