Seri belajar javascript sudah masuk pada pembahasan ke-6 yang mana sebelumnya sudah saya bahas mengenai fungsi (method) di javascript. pembahasan kali ini cukup penting dan menarik mengenai event. apa itu event? dan bagaimana penggunannya di javascript? yuk! simak pembahasan 6 jenis event di javascript berikut ini:
Daftar Isi
Pengertian Event di Javascript
Event adalah sesuatu yang terjadi ketika ada aksi yang dilakukan oleh pengguna atau sistem pada halaman web. Contoh misalnya ketika browser selesai menampilkan halaman dokumen html maka event onload bisa digunakan. Atau saat user mengisi sebuah form atau mengklik button maka kita bisa membuat suatu reaksi dari tindakan user tersebut.
Manfaat penggunaan event adalah memberikan suatu bentuk interaksi yang baik dengan pengguna. Event bisa dimanfaatkan untuk validasi inputan pengguna. memberikan respon saat halaman selesai di load, dan masih banyak lagi.
Ada banyak jenis event yang bisa digunakan baik yang di definisikan untuk user ataupun sistem. Namun pada kesempatan kali ini saya hanya akan membagikan 6 jenis event di javascript yang biasanya sering digunakan yaitu:
| 1 | onload | Event terjadi ketika halaman html selesai di tampilkan |
| 2 | onclick | Event terjadi ketika suatu elemen HTML diklik |
| 3 | onchange | Event terjadi ketika nilai suatu elemen berubah |
| 4 | onmouseover | Event terjadi ketika pointer mouse menyentuh/memasuki suatu elemen HTML |
| 5 | onmouseout | Event terjadi ketika pointer mouse keluar dari suatu elemen HTML |
| 6 | onsubmit | Event terjadi ketika form di submit |
OnLoad
Event onload adalah event yang dapat di buat dalam document body. Event ini akan berjalan ketika semua isi dokumen telah ditampilkan di halaman browser.
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
function tampil(){
document.getElementById("area").innerHTML="Teks ini dari event onload"
}
</script>
</head>
<body onload="tampil()">
<div id="area"></div>
</body>
</html>Perhatikan kode di atas event onload menjadi atribut dalam tag <body> dengan memanggil fungsi tampil yang akan menampilkan kalimat ‘Teks ini dari event onload’ .
OnClick
Event onclick terjadi saat pengguna mengklik suatu elemen dalam html. biasanya event ini digunakan untuk button, link, radio button, checkbox, tombol submit atau tombol reset.
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
//Membuat fungsi Hello()
function Hello(){
return alert('Hello World!')
}
</script>
</head>
<body>
<button onclick="Hello()">Klik Diisni</button>
</body>
</html>Perhatikan kode di atas event onclick menjadi atribut pada elemen button dengan memanggil fungsi Hello() yang menampilkan tampilan pop up ‘Hello World!’.
OnChange
Event onchange akan berjalan ketika terjadi perubahan nilai pada suatu elemen. Biasanya digunakan untuk combobox (select list), text field dan text area.
<!DOCTYPE html>
<html>
<head>
<script>
//Membuat fungsi Hello()
function tampil(){
var nama_jur = document.getElementById("jurusan").value
document.getElementById("tampil").innerHTML="Jurusan : "+nama_jur
}
</script>
</head>
<body>
<select id="jurusan" OnChange="tampil()">
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Teknik Komputer">Teknik Komputer</option>
</select>
<br><br>
<div id='tampil'></div>
</body>
</html>Perhatikan kode diatas, event onchange menjadi atribut dalam tag <select> dengan memanggil fungsi tampil().
Ketika ada perubahan nilai pada select list tersebut maka event ini akan berjalan, dimana melalui fungsi tampil() akan mengambil nilai pada select list melalui id=’jurusan’. Kemudian nilai tersebut akan ditampilkan pada elemen dengan id=’tampil’.
onMouseover & OnMouseOut
Event onmouseover berjalan ketika pengguna menggerakan kursor mouse menyentuh elemen tertentu, baik berupa dokumen, link, form, image dan lainnya.
Sedangkan event onmouseout adalah kebalikannya yaitu event ini akan terjadi ketika kursor mouse bergerak keluar dari elemen suatu tertentu.
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
function tampil(){
document.getElementById("area").style.color='crimson'
document.getElementById("area").innerHTML='Anda menyentuh area terlarang'
}
function kembali(){
document.getElementById("area").style.color='black'
document.getElementById("area").innerHTML='Jangan arahkan mouse kalian disini'
}
</script>
</head>
<body>
<div id="area" onmouseover="tampil()" onmouseout="kembali()" style="background-color:white;">Jangan arahkan mouse kalian disini</div>
<br>
</body>
</html>Perhatikan kode di atas terdapat elemen <div> dengan id=’area’ yang memiliki atribut onmouseover yang memanggil fungsi tampil() dan onmouseout yang memanggil fungsi kembali().
Ketika cursor mouse masuk ke elemen tersebut maka event onmouseover akan terjadi dengan menjalankan fungsi tampil() yang menampilkan kalimat ‘Anda menyentuh area terlarang’ dengan tulisan berwarna crimson (merah).
Sedangkan ketika cursor mouse pengguna keluar dari elemen tersebut maka event onmouseout akan terjadi. dengan memanggil fungsi kembali() untuk menampilkan kalimat semula.
OnSubmit
Event onsubmit khusus diguanakn untuk tombol submit pada form. Ketika pengguna mengklik submit maka event ini akan berjalan.
Contoh:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form">
Nama : <input type="text" id="nama"/><br><br>
Jurusan : <select id="jurusan">
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Teknik Komputer">Teknik Komputer</option>
</select>
<br><br>
<input type="submit" value="Kirim"/>
</form>
<br>
<script>
function tampil(){
var nama = document.getElementById("nama").value;
var jurusan = document.getElementById("jurusan").value;
document.write("Nama : "+nama+"<br>")
document.write("jurusan : "+jurusan+"<br>")
}
document.getElementById("form").onsubmit=tampil
</script>
</body>
</html>Perhatikan kode di atas, terdapat form dengan id=’form’ yang memiliki elemen text field dengan id=’nama’ dan select list dengan id=’jurusan’ serta tombol submit.
Ketika form tersebut di submit maka event akan terjadi dengan memanggil fungsi tampil().
Fungsi tampil() akan mengambil nilai dari elemen nama dan jurusan berdasarkan id-nya masing-masing, lalu kemudian ditampilkan.
Kesimpulan
Sekian pembahasan mengenai 6 jenis event di javascript, ada banyak jenis event yang bisa kalian pakai untuk membuat sebuah reaksi dari tindakan user di halaman web yang kalian buat. Silahkan beri komentar kalian di bawah postingan ini jika ada pertanyaan, terimakasih.
