Event pada JavaScript adalah Event HTML yang merupakan hal-hal yang terjadi pada elemen HTML.
JavaScript dapat digunakan pada event HTML ini untuk menhandel event yang terjadi.
Event HTML
Sebuah event HTML dapat berupa hal yang terjadi pada browser aatau sesuatu yang dilakukan oleh user atau pengguna seperti:
onload - browser selesai load elemen HTML.
onsubmit - user menekan tombol submit pada form.
onchange - sebuah elemen HTML telah berubah.
onclick - user klik pada sebuah elemen HTML.
onmouseover - user memindahkan mouse ke atas dari elemen HTML.
onmouseout - user memindahkan mouse menjauh dari elemen HTML.
onkeydown - user menekan sebuah tombol keyboard.
Semua event ini akan dipelajari tersendiri pada tutorial selanjutnya.
Pada bahasa pemrograman kita bisa memasukan atau menjalankan kode program pada saat event terjadi yang disebut juga event handler.
Begitu pula halnya dengan JavaScript, Event pada HTML ini bisa dihandel oleh kode JavaScript.
Banyak metode berbeda yang dapat digunakan oleh JavaScript untuk menghandel event HTML ini.
event atribut elemen HTML dapat mengeksekusi kode JavaScript secara langsung
event atribut elemen HTML dapat memanggil fungsi JavaScript
kita bisa menggunakan fungsi event handler sendiri kepada elemen HTML
kita bisa mencegah event untuk dikirim atau dihandel
Syntak Event Handler JavaScript
Kode atau script JavaScript bisa dibalut dalam tanda petik tunggal atau petik ganda
<element event='kode JavaScript'>
<element event="kode JavaScript">
Contoh Click Event
<html>
<head>
<title>JavaScript Click Event</title>
</head>
<body>
<p id="demo"></p>
<button onclick="document.getElementById('demo').innerHTML = 'Klik tombol dengan event handler langsung!'">Tombol1</button>
<button id="btn2" onclick="tampilkanPesan()">tombol2</button>
<script>
function tampilkanPesan() {
document.getElementById("btn2").innerHTML = "Event handler dengan fungsi";
}
</script>
</body>
</html>
Hasilnya bila dilihat dengan browser,
Gambar di bawah adalah saat halaman selesai dimuat.
Gambar di bawah adalah saat Tombol1 diklik.
Gambar di bawah adalah saat Tombol2 diklik.
Contoh Load Event
<html>
<head>
<title>JavaScript Load Event</title>
</head>
<body>
<img src="rajatutor.png" onload="loadImage()">
<script>
function loadImage() {
alert("Gambar telah dimuat!");
}
</script>
</body>
</html>
Hasilnya bila dilihat dengan browser
Contoh Submit Event
<html>
<head>
<title>JavaScript Submit Event</title>
</head>
<body>
<form action="submit_page.php" onsubmit="return cekSubmit()">
<h3>Selamat Datang di RajaTutor.com</h3>
Masukkan Nama Anda <br>
<input type="text" id="nama">
<input type="submit">
</form>
<script>
function cekSubmit() {
var nama = document.getElementById("nama").value;
if (nama.length==0) {
alert("Nama harus diisi!");
return false;
}
}
</script>
</body>
</html>
Hasilnya bila dilihat dengan browser bila tombol submit diklik tanpa memasukkan nama
