Belajar jQuery‎ > ‎

05. Event Handler pada jQuery

posted Nov 27, 2011 9:57 AM by Editor KursusInternet   [ updated Dec 31, 2011 8:24 AM ]

Pendahuluan

Event adalah kejadian yang terjadi pada suatu elemen / objek misalkan kejadian ketika elemen diklik oleh mouse, ketika kita mengetik karakter tertentu, dan lain-lain. 

Dan untuk menghasilkan interaksi yang baik, event harus direspon oleh suatu function / method. Function tersebut disebut dengan event handler (penanganan event). 

Event Handler pada jQuery

Pada jQuery, kita bisa "mengikatkan" suatu function pada event dan elemen tertentu yang kita inginkan dengan dua cara :
  • menggunakan function bind() dari tiap objek. Kita mengikatkan event handler pada function ini dengan mengirim parameter teks - yang mendefinisikan event yang terjadi seperti "click", "mouseclick", dan lain-lain - dan event handler. Kita juga dapat menggunakan function delegate() yang berfungsi seperti bind() namun untuk digunakan pada beberapa elemen.
  • menggunakan function-function event yang sudah menjadi bagian dari API seperti click(), mousedown(), toggle(), dan lain-lain. Selain dapat menyertakan event handler, kita juga dapat menggunakan function ini untuk langsung memicu (trigger) terjadinya event tersebut secara "paksa" melalui coding. 

Contoh Penggunaan Bind

contoh_event_bind.html

<html> <head>     <title>Contoh Event - Bind</title>     <script src="jquery-1.7.min.js"></script>     <script type="text/javascript">         function function_klik(obj)         {             $("ul").children().each(                 function(idx, itm) {                     $(itm).html( $(itm).html() + ", item ke " + (idx+1) );                 }             );         }         $(document).ready(             function() {                 $("#tombolklik").bind("click",function_klik);                 $("#labelstatus").bind("mouseover", function()                     {                         $("#labelstatus").html("Mouse Over");                     }                 );                 $("#labelstatus").bind("mouseout", function()                     { $("#labelstatus").html("Arahkan Disini !");                     }                 );             }         );     </script> </head> <body>     <a id="link_satu" href="http://www.kursusinternet.com">KursusInternet.com</a>     <ul id="daftar">Daftar Situs Populer Dunia:         <li><a href="http://www.wikipedia.org">Wikipedia</a></li>         <li><a href="http://www.google.com">Google</a></li>         <li><a href="http://www.yahoo.com">Yahoo</a></li>     </ul>     <button id="tombolklik">Klik Disini</button><br />     <div id="labelstatus" style="background: yellow;">Arahkan Disini !</div> </body> </html>

Youtube : Video Hasil Eksekusi Contoh Penggunaan Bind


Contoh Penggunaan Function Event

contoh_event_trigger.html

<html> <head> <title>Contoh Event - Bind</title> <script src="jquery-1.7.min.js"></script> <script type="text/javascript">         $(document).ready(             function() {                 $("#tombolklik").click( function()                     {                         $("ul").children().each(                             function(idx, itm) {                                 $(itm).html( $(itm).html() + ", item ke " + (idx+1) );                             }                         );                     }                 ); $("#simulasi").click( function() { $("#labelstatus").mouseover(); $("#tombolklik").click();                     }                 );                 $("#simulasimouseout").click( function()                    {                         $("#labelstatus").mouseout();                     }                 );                 $("#labelstatus").mouseover(function()                     {                         $("#labelstatus").html("Mouse Over");                     }                 );                 $("#labelstatus").bind("mouseout", function()                     {                         $("#labelstatus").html("Arahkan Disini !");                     }                 );             }         );     </script> </head> <body>     <a id="link_satu" href="http://www.kursusinternet.com">KursusInternet.com</a>     <ul id="daftar">Daftar Situs Populer Dunia:         <li><a href="http://www.wikipedia.org">Wikipedia</a></li>         <li><a href="http://www.google.com">Google</a></li>         <li><a href="http://www.yahoo.com">Yahoo</a></li>     </ul>     <button id="tombolklik">Klik Disini</button>&nbsp;     <button id="simulasi">Trigger Event</button>&nbsp;     <button id="simulasimouseout">Simulasi Mouse Out</button><br />     <div id="labelstatus" style="background: yellow;">Arahkan Disini !</div> </body> </html>

Youtube : Video Hasil Eksekusi Contoh Penggunaan Event Trigger


Sumber Referensi