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>
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
![clip_image002[4]](http://lh5.ggpht.com/-ITv3b9LuWuE/TqTFeNw43PI/AAAAAAAACm8/sMTNuMnNik4/s1600-h/clip_image002%25255B4%25255D%25255B3%25255D.jpg "clip_image002[4]")
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
B. Berikut ini beberapa contoh Penanganan Event
1. onclick
Pada contoh ini kita membuat tombol, yang kalau diklik akan muncul window alert (Ingat diketik ulang!!!).
<script>Pada contoh berikut jika kita mengklik radio button yang akan mengubah warna background halaman web.
function inform(){
alert("Hai anda mengklik saya")
}
</script>
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
<html>2. onload
<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>
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>3. onmouseover dan onmouseout
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>
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>4. onunload
<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>
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman website
<html>--------------------------------------------
<body onunload="alert('Thank you. Please come back to this site and visit us
soon, ok?')">
<h1>Welcome</h1>
</body>
</html>
0 comments:
Post a Comment