Apa itu Event Handler?
Event Handler adalah kemampuan Javascript untuk mendeteksi event atau kejadian-kejadian yang terjadi di halaman website, kemudian menangani event tersebut dengan melakukan suatu proses. Event di halaman website bisa bermacam-macam, seperti; klik, double klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.
Bentuk sintaknya:
nama_event=”kode javascript”
Contoh :
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘Hello world’)”>GOOGLE</a>
</body>
</html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘Hello world’)”>GOOGLE</a>
</body>
</html>
Pada contoh di atas nama event adalah onclick dan kode Javascript adalah alert(‘Hello world’).
Buka file baru dengan NOTEPAD dan ketik ulang snippet diatas dan beri nama tes.html (extension .html) – save as type : All File. Kemudian klik 2 kali file tes.html, maka pada halaman browser muncul link GOOGLE, yang jika diklik (onclick) maka akan dieksekusi kode javascript ------> alert(‘Hello world’).
Ingat!!! snippet diatas diketik ulang dan jangan copy - Paste. Karena file dari hasil copy – paste saat dibuka muncul kata '”GOOGLE” tetapi link tidak ke http://www.google.com
Selain onclick Ada banyak macam event yang bisa terjadi pada halaman website 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
• onchange
• onclick
• ondblclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload
Contoh Penanganan Event
- onclick
Kita bikin tombol yang kalau diklik akan muncul window alert :
Ingat diketik ulang!!!
<script>
function inform(){
alert("Hai anda mengklik saya")
}
</script>
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
Pada contoh berikut jika klik radio button, maka ada perubahan warna background webpage.
<html>
<body>
<form name="go">
<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>
- onload
Event onload akan dieksekusi jika suatu objek telah di-load, pada contoh berikut kita menaruh event onload di tag <body>, artinya jika halaman web sudah di-load semua, maka akan dieksekusi kode javascript.
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>
- onmouseover dan onmouseout
Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek HTML, onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML.
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</body>
</html>
- onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup halaman website
<html>
<body onunload="alert('Thank you. Please come back to this site and visit us soon, ok?')">
<h1>Welcome</h1>
</body>
</html>
--------------------------------------------
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
