Pada Pertemuan sebelumnya kita pernah membahas tentang javascript, tapi kali ini kita akan membahas tentang penanganan event atau event handler.
Penanganan Event atau Event Handler ialah kemampuan javascript untuk mendeteksi Event atau kejadian - kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik,double klik, menggerakkan mouse, bila pointer mouse berada diatas objek HTML, dan sebagainya.
contohnya:
Penanganan Event atau Event Handler ialah kemampuan javascript untuk mendeteksi Event atau kejadian - kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik,double klik, menggerakkan mouse, bila pointer mouse berada diatas objek HTML, dan sebagainya.
contohnya:
Sintaknya:contoh diatas ada sebuah link blog ini, yang jika di klik(onclick) maka akan keluar kode javascript alert('Hai Bocer')
nama_event="Kode Javascript"
contoh:
<html>
<body>
<a href="http://blobocer.blogspot.com" onclick="alert('Hai Bocer')">BLOG</a>
</body>
</html>
Ada banyak macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai berikut:
- onblur
- onchange
- onclick
- ondblclick
- onerror
- onfocus
- onkeydown
- onkeypress
- onkeyup
- onload
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onreset
- onresize
- onselect
- onsubmit
- onunload
Contoh-contoh penanganan Event
1. Onclick
Pada contoh berikut ini ketika kita mengklik radio button maka warna latar halaman web akan berganti:
<html>
<body>
<form name="blog">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>
2. Onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita akan menaruh envent load di tag <body>, artinya jika halaman web di load semua, maka dieksekusi kode javascript.
<html>
<head><title>Contoh Body Onload</title>
<body onload="alert('Halaman ini Sudah di Muat')">
Apa aja Boleh!!!!
</body>
</head>
</html>
3. Onmouseover dan onmouseout
Onmouseover berguna untuk mendeteksi apakah pointer mouse berada diatas suatu objek HTML, onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML, Contoh:
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#ccc" bgColor="#ccc">
<td>Baris 1</td>
</tr>
<tr>
<td>Baris 2</td>
</tr>
</table>
</body>
</html>
4. Onunload
Onunload biasanya berfungsi untuk mendeteksi ketika user meninggalkan halaman web, contohnya:
<html>
<body onunload="alert('Terima Kasih, Kembalilah di halaman web ini dan melihat semuanya, ok')">
<h1>Wellcome</h1>
</body>
</html>
Bagaimana kalian sudah mengertikan tentang event handler di javascript, sebenarnya masih ada lagi event lainnya. tapi berhubung karena jari saya sudah menyuruh saya untuk berhenti mengetik lagi, jadinya begini aja dulu contohnya.
Mudah-mudahan artikel ini bisa berguna buat yang ingin belajar Javascript.
GoodLuck!
Nice gan...
ReplyDeleteMantap gan menambah ilmu
ReplyDeleteMantap gan menambah ilmu
ReplyDeleteAlhamdulilah dapet ilmu lagi nih, thanks gan
ReplyDeleteCocok nih untuk newbie seperti saya
ReplyDeleteCOBAAH DI TEMPLATE BLOG SAYA .
ReplyDeleteMantap gan,bermanfaat
ReplyDeletethanks, penjelasanya lengkap dan kompleks
ReplyDeletekomplit penjelasannya... today i learned
ReplyDeletetutorial yang memanjakan umat.. tks gan
ReplyDeleteNice gan
ReplyDelete