Last active
January 30, 2020 10:46
-
-
Save Kcko/7ce7d88623ee38d9e7ee to your computer and use it in GitHub Desktop.
Use event with function and data
// ukazka pouziti eventu, funkce, data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment