Memahami Event Method pada jQuery

Event dapat dipicu dari interaksi pengguna pada suatu halaman web, seperti ketika Link atau tombol telah diklik, teks telah dimasukkan ke dalam input atau textarea, memilih teks di dalam Select box, menekan tombol pada keyboard, pointer pada mouse telah dipindahkan, dll. Dalam berbagai hal, Browser sendiri dapat memicu suatu Event, seperti memuat halaman dan memuat ulang Event.

jQuery dapat meningkatkan mekanisme Event Handling dasar dengan menawarkan Event Method pada beberapa Event browser asli, beberapa metode tersebut antara lain ready(), click(), keypress(), focus(), blur(), change(), dll. Misalnya, untuk menjalankan beberapa kode JavaScript ketika DOM sudah siap, kalian dapat menggunakan metode jQuery ready(), seperti berikut:

<script>
    $(document).ready(function(){
        // Kode untuk dijalankan
        alert("Halo Semuanya");
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: $(document).ready() adalah Event yang digunakan untuk memanipulasi halaman dengan aman pada jQuery. Kode yang ada di dalam Event tersebut hanya akan berjalan setelah halaman DOM telah siap sepenuhnya.

Umumnya, Event dapat dikategorikan ke dalam empat kelompok - Mouse Event, Keyboard Event, Form Event dan Document/Window Event. Berikut ini mungkin dapat memberikan kalian gambaran singkat dari semua Event serta metode jQuery yang terkait satu per satu.


Mouse Event

Mouse Event akan dijalankan ketika terdapat pengguna mengklik beberapa elemen, memindahkan cursor mouse, dll. Berikut ini adalah beberapa metode jQuery yang sering digunakan untuk menangani (Handling) Mouse Event.

Metode click()

Metode click() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang telah dipilih untuk Event "klik". Fungsi yang sudah dibuat akan dijalankan ketika terdapat pengguna mengklik elemen tersebut. Contoh berikut akan menyembunyikan elemen <p> pada halaman tepat ketika diklik:

<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).slideUp();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Keyword this di dalam fungsi Event Handler jQuery diatas adalah referensi ke dalam elemen dimana Event tersebut dikirim.

Metode dblclick()

Metode dblclick() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih untuk Event "dblclick" (Double Click). Fungsi tersebut akan dijalankan ketika terdapat pengguna mengklik dua kali pada elemen tersebut. Contoh berikut akan menyembunyikan elemen <p> ketika elemen tersebut diklik dua kali:

<script>
    $(document).ready(function(){
        $("p").dblclick(function(){
            $(this).slideUp();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode hover()

Metode hover() pada jQuery akan melampirkan satu atau dua fungsi Event Handler ke dalam elemen terpilih yang akan dijalankan ketika Cursor mouse mengarah dan meninggalkan elemen yang dipilih. Fungsi pertama dijalankan ketika pengguna mengarahkan Cursor mouse kearah suatu elemen, sedangkan fungsi kedua dijalankan ketika pengguna meninggalkan Cursor mouse dari elemen tersebut.

Contoh berikut akan menyeleksi elemen <p> ketika kalian mengarahkan Cursor tepat di atasnya, seleksi tersebut akan terhapus tepat ketika kalian memindahkan Cursor:

<script>
    $(document).ready(function(){
        $("p").hover(function(){
            $(this).addClass("highlight");
        }, function(){
            $(this).removeClass("highlight");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tips: Kalian dapat melihat bahwa metode hover() adalah kombinasi dari metode mouseenter() dan mouseleave().

Metode mouseenter()

Metode mouseenter() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih serta dijalankan ketika Cursor mengarah ke elemen tersebut. Contoh berikut akan menambahkan class="highlight" ke dalam elemen <p> ketika kalian mengarahkan atau meletakkan cursor di atasnya:

<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $(this).addClass("highlight");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode mouseleave()

Metode mouseleave() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih serta dijalankan ketika cursor mouse meninggalkan elemen tersebut. Contoh berikut akan menghapus class="highlight" dari elemen <p> ketika kalian memindahkan cursor dari elemen tersebut:

<script>
    $(document).ready(function(){
        $("p").mouseleave(function(){
            $(this).removeClass("highlight");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Event Keyboard

Event Keyboard akan dijalankan ketika terdapat pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa metode jQuery yang sering digunakan untuk Keyboard Event Handling.

Metode keypress()

Metode keypress() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih (biasanya pada form) yang akan dijalankan ketika browser menerima input keyboard dari pengguna. Contoh berikut akan menampilkan pesan ketika Event Keypress dijalankan dan ketika kalian menekan tombol pada keyboard:

<script>
    $(document).ready(function(){
        var i = 0;
        $('input[type="text"]').keypress(function(){
            $("span").text(i += 1);
            $("p").show().fadeOut();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Event Keypress hampir mirip dengan Event Keydown, kecuali modifier dan non-printing keys (Tombol yang tidak menghasilkan) seperti tombol Shift, Esc, Backspace, Delete, Tombol Arah, dll.

Metode keydown()

Metode keydown() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih (biasanya pada kontrol form) yang dijalankan ketika terdapat pengguna menekan tombol pertama kali pada keyboard. Contoh berikut akan menampilkan pesan ketika terjadi Event Keydown dan ketika kalian menekan tombol pada keyboard:

<script>
    $(document).ready(function(){
        var i = 0;
        $('input[type="text"]').keydown(function(){
            $("span").text(i += 1);
            $("p").show().fadeOut();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode keyup()

Metode keyup() pada jQuery akan melampirkan fungsi Event Handler ke dalam elemen yang dipilih serta akan dijalankan ketika pengguna melepaskan tombol pada keyboard. Contoh berikut akan menampilkan pesan ketika Event Keyup dijalankan dan ketika kalian menekan dan melepaskan tombol pada keyboard:

<script>
    $(document).ready(function(){
        var i = 0;
        $('input[type="text"]').keyup(function(){
            $("span").text(i += 1);
            $("p").show().fadeOut();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tips: Event Keyboard dapat dilampirkan ke dalam elemen apa pun, tetapi Event tersebut hanya dikirim ke elemen yang memiliki focus. Itulah sebabnya Event Keyboard umumnya hanya dilampirkan pada kontrol form seperti input teks atau textarea.

Event Form

Event Form akan dijalankan ketika kontrol form menerima atau kehilangan focus atau ketika pengguna mengubah nilai pada kontrol form seperti mengetikkan teks ke dalam input teks, memilih opsi pada select box, dll. Berikut ini adalah beberapa metode jQuery yang sering digunakan untuk Event Form Handling.

Metode change()

Metode change() pada jQuery akan melampirkan fungsi event handler ke dalam elemen <input>, <textarea>, dan <select> yang akan dijalankan ketika nilainya berubah. Contoh berikut akan menampilkan pesan alert ketika kalian memilih opsi pada Dropdown:

<script>
    $(document).ready(function(){
        $("select").change(function(){
            var pilihan = $(this).find(":selected").val();
            alert("Anda telah memilih - " + pilihan);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Untuk select box, checkbox, dan radio button, event tersebut akan dijalankan langsung ketika terdapat pengguna menentukan pilihan dengan mouse, tetapi untuk input teks dan textarea Event akan dijalankan setelah elemen tersebut kehilangan focus.

Metode focus()

Metode focus() pada jQuery akan melampirkan fungsi event handler ke dalam elemen yang dipilih serta dijalankan ketika elemen tersebut mendapatkan focus. Contoh berikut akan menampilkan pesan ketika input teks menerima focus:

<script>
    $(document).ready(function(){
        $("input").focus(function(){
            $(this).next("span").show().fadeOut("slow");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode blur()

Metode blur() pada jQuery akan melampirkan fungsi event handler ke dalam elemen form seperti <input>, <textarea>, dan <select> yang akan dijalankan ketika kehilangan focus. Contoh berikut akan menampilkan pesan ketika input teks kehilangan focus:

<script>
    $(document).ready(function(){
        $("input").blur(function(){
            $(this).next("span").show().fadeOut("slow");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode submit()

Metode submit() pada jQuery akan melampirkan fungsi event handler ke dalam elemen <form> yang akan dijalankan ketika pengguna mencoba mengirimkan form tersebut. Contoh berikut akan menampilkan pesan tergantung pada nilai yang dimasukkan ketika kalian mencoba mengirimkan form:

<script>
    $(document).ready(function(){
        $("form").submit(function(event){
            var regex = /^[a-zA-Z]+$/;
            var nilai = $("#namaDepan").val();
            if(regex.test(nilai) == false){
                $("#hasil").html('<p class="error">Tidak Valid!</p>').show().fadeOut(1000);
                // Mencegah submit
                event.preventDefault();
            }
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tips: Form dapat dikirimkan baik dengan mengklik tombol Submit atau dengan menekan tombol Enter pada Keyboard ketika elemen Form tertentu memiliki focus.

Event Document/Windows

Event juga dapat dipicu pada situasi ketika halaman DOM (Document Object Model) sudah siap atau ketika terdapat pengguna yang mengubah ukuran atau melakukan Scroll pada jendela browser, dll. Berikut adalah beberapa metode jQuery yang sering digunakan untuk Event Handling tersebut.

Metode ready()

Metode ready() pada jQuery dapat menentukan fungsi yang akan dijalankan ketika DOM sudah sempurna.

Contoh berikut akan mengubah teks paragraf secara langsung setelah DOM telah sempurna dan siap untuk dimanipulasi:

<script>
    $(document).ready(function(){
        $("p").text("DOM Sudah dimuat.");
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode resize()

Metode resize() pada jQuery akan melampirkan fungsi event handler ke dalam elemen Window yang akan dijalankan ketika ukuran dari jendela browser berubah.

Contoh berikut akan menampilkan lebar dan tinggi jendela browser ketika kalian mengubah ukuran jendela browser:

<script>
    $(document).ready(function(){
        $(window).resize(function() {
            $(window).bind("resize", function(){
                $("p").text("Lebar : " + $(window).width() + " Pixel, " + "Tinggi : " + $(window).height() + " Pixel");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode scroll()

Metode scroll() pada jQuery akan melampirkan fungsi event handler ke dalam jendela atau iframe dan elemen serta dapat dijalankan setiap kali posisi Scroll berubah.

Contoh berikut akan menampilkan pesan ketika kalian men-Scroll jendela browser:

<script>
    $(document).ready(function(){
        $(window).scroll(function() {
            $("p").show().fadeOut("slow");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar