Pengenalan jQuery Api Bind

Salah satu kemudahan dengan menggunakan jQuery sebagai framework javascript adalah banyak nya api yang memudahkan kita menempelkannya pada projek yang akan kita kerjakan. Tiap api memiliki fungsi dan kegunaan masing-masing.

Pada artikel ini, saya akan coba sedikit menjelaskan apa itu api Bind pada jQuery. Langsung saja ke contoh kasus sederhana.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Bind Jquery Event</title>
</head>
<body>
  <h2><a href="#" alt="ini Alt">Saya Sebuah Link</a></h2>
  <div class='result' style='display:none;'></div>
 
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  <script>
    $(function(){
      $('h2 a').mouseover(function(){
        var alt = $(this).attr('alt');
        $('div.result').html(alt);
        $('div.result').show(300);
      }).mouseleave(function(){
        $('div.result').hide();
      });
    });
  </script>
</body>
</html>

Saat kita menjalankan kode diatas, akan terlihat sederhana bagaimana menghandle suatu element link, lalu kita ingin mengambil informasi dari link tersebut melalui event mouseover dan mouserleave. Terlihat pada kode handlenya kita buat 2 event yaitu mouserover dan mouseleave. Coba bayangkan apabila kita ingin menghandle banyak event pada satu element tertentu, kebayang panjang kode kita apabila menuliskan dengan cara diatas.

Untung nya pada jquery terdapat api Bind, dengan api Bind, kita dapat menuliskan banyak event handle pada satu element untuk melakukan beberapa aksi sekaligus. Bagaimana cara penerapan nya, berikut kode diatas dengan menggunakan event Bind.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Bind Jquery Event</title>
</head>
<body>
  <h2><a href="#" alt="ini Alt">Saya Sebuah Link</a></h2>
  <div class='result' style='display:none;'></div>
 
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  <script>
    $(function(){
      $('h2 a').bind('mouseover mouseleave', function(){
        var alt = $(this).attr('alt');
        $('div.result').html(alt);
        $('div.result').toggle();
      });
    });
  </script>
</body>
</html>

Lihat pada kode diatas menjadi lebih sederhana lagi bukan ??
Dengan begitu, kita tidak perlu lama-lama menuliskan kode panjang untuk menghandle suatu element dengan event yang banyak. Dengan Api Bind pada Jquery, sesuai dengan moto jQuery, “write less do more”.

Moga bermanfaat…:)

  • Catatan Tambahan : api jQuery.bind() untuk versi jquery 1.7+ sudah tergantikan dengan api jQuery.on()
  • Referensi Tulisan : http://api.jquery.com/bind/

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: