Pada kesempatan kali ini saya akan membahas mengenal event di javascript. Sebelum membahas lebih jauh saya akan menjelaskan kepada teman-teman apa itu event di javascript ?
Event adalah suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode JavaScript yang sudah dibuat. Sebagian besar event dipicu oleh pemakai yang memanipulasi halaman web pada program browsernya , misalnya jika suatu tombol di klik maka akan menjalankan suatu function.
Berikut beberapa penjelasan dan contoh event pada javascript,
.OnClick
Event title tersebut terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat pada form HTML. Pada contoh berikut kita akan membuat sebuah tombol pada halaman website yang jika di tekan akan memunculka pesan windows alert.
Lakukanlah penulisan script dibawah ini kedalam notepad lalu simpan dengan ekstensi .HTML dan kemudian jalankan di browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title> Contoh event OnClick Javascript</title>
<script type="text/javascript">
function klik(){
alert("Ini adalah contoh event klik");
}
</script>
</head>
<body>
<form>
<input type="button" name="test" value="Silahkan Klik" onClick="klik()" />
</form>
</body>
</html>
Setelah dijalankan di browser, hasilnya seperti berikut:
.OnLoad
Event tersebut akan di jalankan apabila suatu objek diload, dalam kasus ini kita akan menaruh event onload di bagian tag <body> sehinga ketika suatu halaman web diload maka akan muncul sebuah pesan seperti contoh diatas.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title> Contoh event OnLoad Javascript</title>
<script type="text/javascript">
function load(){
alert("Ini adalah contoh event load");
}
</script>
</head>
<body onLoad="load()">
Contoh menjalankan event onload pada tag <body>
</body>
</html>
Setelah dijalankan di browser, hasilnya seperti berikut:
.OnMouseOver dan .OnMouseOut
Event .onMouseOver berjalan jika pemakai meletakkan mouse di atas sebuah link atau suatu objek HTML.
Event .onMouseOut berjalan bila kursor mouse keluar dari daerah link atau suatu objek HTML.
Berikut ini kita akan membuat contoh penggunaan event onMouseOver dan onMouseOut pada kolom tabel, ketika kursor berada d atas kolom tersebut makan backgroundnya akan berganti warna.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<table>
<tr onmouseover="this.bgColor='red'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
<td>Letakan Mouse Di sini untuk menjalankan event OnMouseOver</td>
</tr>
<tr onmouseover="this.bgColor='blue'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
<td>Letakan Mouse Di sini juga untuk menjalankan event OnMouseOver</td>
</tr>
</table>
</body>
</html>
Setelah dijalankan di browser, hasilnya seperti berikut:
Demikian pembahasan mengenal event di javascript, Semoga Membantu.
Terima Kasih