Pada tulisan sebelumnya saya menjelaskan secara singkat event delegation dengan jQuery, maka kali ini akan saya berikan contoh penerapannya dalam aplikasi nyata yang pernah saya kerjakan. Pada contoh ini, saya menggunakan jQuery 1.3.2, jQuery UI (ui.core, ui.dialog, ui.draggable dan ui.resizeable). Dalam contoh ini terdapat ratusan div yang berfungsi sebagai cell, dimana setiap cell ini terasosiasi dialog div yang berisi informasi yang di load secara ajax. Div yang berperan sebagai dialog terinisialisasi dari event click setiap cell. Jadi ini akan menghemat jumlah elemen di dalam dokumen HTML.

Untuk melihat demonya silahkan klik disini. Sumber kodenya bisa di unduh di sini. Penerapan event delegasi terdapat di berkas box.js. Cukup perhatikan bagian kode menjelang baris akhir, khususnya dalam event handler click :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.click(function(e) {
        $target = $(e.target);
 
        if ( $target.hasClass('cell') ) {
            var offset = $target.offset();
 
            var targetID = $target.attr('id');
            var targetBlock = $target.attr('cellblock');
            var targetRow = $target.attr('cellrow');
            var targetCol = $target.attr('cellcol');
            var dialogID = 'dialog_' + targetID;
 
            $("body").prepend('<div class="cellPopup" id="' + dialogID + '" title="Cell Information">Loading...</div>');
 
             $("#" + dialogID).load("box_ajax.php?block=" + targetBlock  + "&row=" + targetRow + "&col=" + targetCol, {}, function(data){
                 if ( data ) {
                    $(this).html( data );
                 }
            });
 
            // set as UI dialog
            $("#" + dialogID).dialog({
                position: [offset.left, offset.top],
                bgiframe: true,
                modal: true,
                stack: false		
            });
 
        }
});

Properti e.target dari objek event merupakan element yang sedang ditangani oleh event handler click ini. Saya menjadikannya objek jQuery dengan $target = $(e.target); agar dapat menggunakan method dari jQuery. Kemudian saya memastikan bahwa target element tersebut memiliki class cell. Jika target yang diklik ini memiliki class cell, saya akan membuatkannya sebuah div dialog yang bisa didrag dan diresize dimana offset dialog akan berdekatan dengan posisi div.cell tersebut dan isi dari dialog tersebut merupakan respon dari ajax.