Cara yang paling umum dipakai dalam menggunakan event handler di JavaScript adalah dengan menggunakan kode program seperti berikut ini: Show <!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 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 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:
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 Menguji event di JavaScript Pada HTML5, terdapat beberapa event lain, salah satunya adalah document.addEventListener('contextmenu', function(e) { e.preventDefault(); }, false); Event <!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 <!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 <!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.
|