Memakai Event Handler Di JavaScript


Cara yang paling umum dipakai dalam menggunakan event handler di JavaScript adalah dengan menggunakan kode program seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Latihan</title>
</head>
<body>
    <h1>Latihan</h1>    
    <form id='frmUtama'>
        <div class='baris'>
            <label>Nama:</label>
            <input id='txtNama' name='nama' type='text' class='komponen'/>            
        </div>
        <div class='baris'>
            <label>Jenis:</label>
            <input id='jenisManusia' type='radio' name='jenis' value='manusia' class='komponen'/>Manusia
            <input id='jenisMutant' type='radio' name='jenis' value='mutant' class='komponen'/>Mutant
        </div>
        <div class='baris'>
            <label>Kemampuan:</label>
            <select id='kemampuan' name='kemampuan' multiple=true size='3' class='komponen'>
                <option value='telepati'>Telepati</option>
                <option value='magnetisme'>Magnetisme</option>
                <option value='penyembuhan'>Penyembuhan</option>
                <option value='machinary'>Machinary</option>
            </select>
        </div>
        <div class='baris'>
            <input id='proses' type='submit' value='Proses' />
        </div>
    </form>
    <script type="text/javascript">
        var proses = document.getElementById('proses');
        proses.onclick = function() {
            with(this.form) {
                console.log('Nama = ' + nama.value);              
                for(var item of jenis) { 
                    if (item.checked) { console.log('Jenis = ' + item.value); } 
                }               
                console.log('Kemampuan: ');
                for (var nilai of kemampuan.selectedOptions) {
                    console.log(nilai.value);
                }   
            }
        };
    </script>
</body>
</html>

Pada contoh di atas, saya memberikan anonymous function pada proses.onclick sehingga anonymous function tersebut dikerjakan bila tombol submit di-klik.

Sebagai alternatif, saya juga dapat memberikan event handler dengan DOM Level 2 Events seperti pada kode program berikut ini:

var proses = document.getElementById('proses');
proses.addEventListener('click', function() {
    with(this.form) {
        console.log('Nama = ' + nama.value);              
        for(var item of jenis) { 
            if (item.checked) { console.log('Jenis = ' + item.value); } 
        }               
        console.log('Kemampuan: ');
        for (var nilai of kemampuan.selectedOptions) {
            console.log(nilai.value);
        }   
    }
}, false);

Saya merasa cara ini lebih mirip seperti di Java Swing dimana saya bisa mendaftarkan beberapa event handler berbeda pada sebuah event yang sama.

Event handler yang ada dapat menerima sebuah argument berupa sebuah object Event. Sebagai contoh, saya dapat memanggil method preventDefault() untuk membatalkan aksi dari event. Bila perintah ini diberikan pada tombol submit, maka proses submit (berpindah halaman) akan dibatalkan, seperti yang terlihat pada contoh kode program berikut ini:

var proses = document.getElementById('proses');
proses.addEventListener('click', function(e) {
    with(this.form) {
        if (!nama.value) {
            e.preventDefault();
            return;
        }
        console.log('Nama = ' + nama.value);                              
    }
}, false);

Berikut ini adalah daftar nama event yang sering dipakai:

  • UI events
    1. load
    2. unload
    3. abort
    4. error
    5. select
    6. resize
    7. scroll
  • Focus events
    1. blur
    2. focus
    3. focusin (tidak didukung Firefox)
    4. focusout (tidak didukung FIrefox)
  • Mouse events
    1. click
    2. dblclick
    3. mousedown
    4. mouseenter
    5. mouseleave
    6. mouseout
    7. mouseover
    8. mouseup
    9. mousewheel (pada Firefox bernama DOMMouseScroll)
  • Keyboard events
    1. keydown
    2. keypress
    3. keyup

Sebagai latihan, saya akan membuat sebuah halaman HTML untuk menguji event di atas yang isinya seperti berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Event Tester</title>
        <style type="text/css">     
            #target {
                float: left;
                border: 3px solid black;
                text-align: center;
                height: 400px;
                width: 400px;
                background-color: green;                               
                color: white;
            }
            #daftarEvent {              
                width: auto;
                margin-left: 450px;
            }
            input {
                margin-top: 10px;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div id='target'>
            <p>Target Event Ada Disini!</p>
            <input id='txtInput' type='text' maxlength="50" />          
        </div>
        <div id='daftarEvent'></div>
        <script type="text/javascript">
            // Event handler yang akan dikerjakan bila checkbox diklik
            function checkboxEventHandler(e) {
                var target = document.getElementById('target');
                // khusus untuk focus, target adalah textbox
                if (['blur', 'focus', 'focusin', 'focusout'].indexOf(this.value) >= 0) {
                    target = document.getElementById('txtInput');
                }
                if (this.checked) {
                    console.log('Event handler untuk ' + this.value + ' didaftarkan!');
                    target.addEventListener(this.value, generalEventHandler, true);                                 
                } else {
                    console.log('Event handler untuk ' + this.value + ' dihapus!');             
                    target.removeEventListener(this.value, generalEventHandler, true);
                }
            }   

            // Event handler generic
            function generalEventHandler(e) {               
                console.log(e);
            }

            var events = ['blur', 'focus', 'focusin','focusout', 'click', 'dblclick', 
                          'mousedown', 'mouseenter', 'mouseleave', 'mouseout', 'mouseover', 
                          'mouseup', 'mousewheel', 'DOMMouseScroll', 'keydown', 'keypress', 'keyup'];
            var container = document.getElementById('daftarEvent');
            events.forEach(function(namaEvent) {
                // Membuat checkbox secara dinamis
                var checkBox = document.createElement('input');
                checkBox.id = namaEvent;
                checkBox.type = 'checkbox';
                checkBox.value = namaEvent;
                var baris = document.createElement('div');
                baris.appendChild(checkBox);
                baris.appendChild(document.createTextNode(namaEvent));
                container.appendChild(baris);
                checkBox.addEventListener('click', checkboxEventHandler, false);                              
            });                             
        </script>     
    </body>
</html>

Pada HTML di atas, saya bisa mendaftarkan sebuah event handler yang sama secara dinamis untuk seluruh event yang dipilih. Event handler tersebut akan menampilkan argumen Event ke console Firefox sehingga saya dapat memeriksa nilainya dengan mudah, seperti yang terlihat pada gambar berikut ini:

Menguji event di JavaScript

Menguji event di JavaScript

Pada HTML5, terdapat beberapa event lain, salah satunya adalah contextmenu. Event contextmenu akan dikerjakan bila pengguna browser akan menampilkan context menu (bisa melalui klik kanan atau melalui shortcut di keyboard). Untuk membatalkan context menu sehingga pengguna tidak akan memperoleh tampilan apa-apa saat klik kanan, saya dapat memanggil preventDefault() milik Event tersebut seperti pada kode program berikut ini:

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
}, false); 

Event contextmenu sering dipakai untuk membuat context menu berdasarkan CSS. Akan tetapi, bila memakai browser yang mendukung HTML5 Context Menu, sebaiknya menggunakan atribut contextmenu untuk menghasilkan menu bila pengguna men-klik kanan, seperti pada contoh berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Context Menu</title> 
    </head>
    <body>
        <div style="width: 100%; height: 500px;" contextmenu='menuSingkat'>
        </div>
        <menu type='context' id='menuSingkat'>
            <menuitem label='Laporan' icon='menu_laporan.png'></menuitem>
            <menuitem label='Produk' icon='menu_produk.png'></menuitem>
            <menuitem label='Maintenance' icon='menu_maintenance.png'></menuitem>           
        </menu>           
    </body>
</html>
Membuat context menu dengan HTML5

Membuat context menu dengan HTML5

Event menarik lainnya pada HTML5 adalah beforeunload yang dapat dipakai untuk menampilkan sebuah pesan bila pengguna akan meninggalkan halaman. Event tersebut tidak dapat dipakai untuk membatalkan aksi pengguna yang ingin meninggalkan halaman karena keputusan tetap ada ditangan pengguna. Sebagai contoh, saya dapat menampilkan sebuah pesan pada saat pengguna menutup browser atau beralih ke situs lain, dengan menggunakan kode program berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Halaman Saya</title> 
    </head>
    <body>
        <script type="text/javascript">
            window.addEventListener('beforeunload', function(event) {
                event.returnValue="Terima kasih sudah mengunjungi saya!";
            });
        </script>
    </body>
</html>

Pada FireFox, pesan yang saya berikan tidak akan ditampilkan seperti yang terlihat pada gambar berikut ini:

beforeunload pada Firefox

beforeunload pada Firefox

Sementara itu, pada Internet Explorer, pesan akan ditampilkan seperti yang terlihat pada gambar berikut ini:

beforeUnload pada Internet Explorer

beforeUnload pada Internet Explorer

Selain memakai event bawaan, beberapa browser termasuk Firefox juga mendukung CustomEvent. Untuk men-raise CustomEvent, saya menggunakan method dispatchEvent(). Untuk mendaftarkan event handler, saya tetap bisa menggunakan addEventListener() seperti biasa. Sebagai contoh, berikut ini adalah kode program JavaScript yang memakai CustomEvent:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Latihan</title>  
    </head>
    <body>
        <input id='selesai' type='button' value='Makanan Selesai Dimasak!' />
        <div id='output' style='font-size: xx-large; color: red;'></div>
        <script type="text/javascript">
            var tombol = document.getElementById('selesai');
            var output = document.getElementById('output');           

            /* menghasilkan event / raise event */          
            tombol.addEventListener('click', function() {
                var selesaiDimasakEvent = new CustomEvent('selesaiDimasak', 
                    {'detail': {'namaMenu': 'Ayam Goreng', 'waktu': '3 menit'}});
                output.dispatchEvent(selesaiDimasakEvent);              
            }, false);

            /* mendengarkan event / event listener */                           
            output.addEventListener('selesaiDimasak', function(e) {
                console.log(e);                                         
                output.innerHTML = e.detail.namaMenu + " sudah siap! (waktu masak: " + e.detail.waktu + ")";
            }, false);
        </script>
    </body>
</html>

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: