Event handler di jQuery – PT Proweb Indonesia

Untuk menambahkan event handler melalui jQuery kita dapat menggunakan bind pada selector yang bersangkutan.

Sebagai contoh kita akan menambahkan event handler saat user melakukan click pada id buat-besar
    $(‘#buat-besar’).bind(‘click’,function(){
        $(‘#kutipan’).removeClass(‘normal’);
        $(‘#kutipan’).removeClass(‘normal’);
        $(‘#kutipan’).addClass(‘besar’);
    });

Pada contoh berikut ini kita akan membuat event handler pada button untuk membuat tampilan huruf kecil, normal dan besar :
$(function(){
    $(‘#buat-kecil’).bind(‘click’,function(){
        $(‘#kutipan’).addClass(‘kecil’);
        $(‘#kutipan’).removeClass(‘normal’);
        $(‘#kutipan’).removeClass(‘besar’);
    });

    $(‘#buat-normal’).bind(‘click’,function(){
        $(‘#kutipan’).removeClass(‘kecil’);
        $(‘#kutipan’).addClass(‘normal’);
        $(‘#kutipan’).removeClass(‘besar’);
    });

    $(‘#buat-besar’).bind(‘click’,function(){
        $(‘#kutipan’).removeClass(‘normal’);
        $(‘#kutipan’).removeClass(‘normal’);
        $(‘#kutipan’).addClass(‘besar’);
    });

});

Kode lengkap untuk event.html adalah :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<link rel=”stylesheet” href=”event.css”>

});
</script>
</head>
<body>
<div id=”kutipan”>
    The LORD is my shepherd, I lack nothing. <br/>
    He makes me lie down in green pastures,he leads me beside quiet waters,    he refreshes my soul. <br/ >
    He guides me along the right paths for his name`s sake.
</div>
<button id=”buat-kecil”>Kecil</button> 
<button id=”buat-normal”>Normal</button> 
<button id=”buat-besar”>Besar</button> 
</body>
</html>

Kemudian file css event.css nya :
body {
font-family: Arial;
font-size: 14px;
}

.kecil {
font-family: Arial;
font-size: 10px;
}

.biasa {
font-family: Arial;
font-size: 14px;
}

.besar {
font-family: Arial;
font-size: 18px;
}

Demo bisa dilihat pada http://aris.proweb.asia/event.html dengan tampilan seperti berikut ini:
– saat normal