Event handler pada javascript

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

Table of Contents Show

Apakah yang dimaksud event handler JavaScript?
2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?
Apa yang dimaksud dengan event OnClick?
Apa itu onload?

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Latihan</title>
</head>
<body>
    <h2>Latihan</h2>    
    <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

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

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

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

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>

Apakah yang dimaksud event handler JavaScript?

Event handling adalah penanganan keadaan dari browser atau input yang dimasukkan oleh pengguna. Kita bisa mendapatkan tombol keyboard atau mouse yang ditekan atau perubahan pada browser dan isinya.

2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?

onclick = adalah event jika sebuah element html di klik.

Apa yang dimaksud dengan event OnClick?

OnClick. OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

Apa itu onload?

Event onload adalah event ketika suatu objek selesai dimuat (di-load) dan menampilkan seluruh eelemen HTML pada browser. Event ini dapat terjadi pada objek window, image, dan layer.