Event adalah hal yang terjadi pada elemen HTML akibat sebuah aksi yang diterapkan atau dieksekusi.
JS dapat mendeteksi event yang terjadi pada sebuah elemen HTML sehingga memudahkan programmer untuk melakukan reaksi.
Contoh-contoh event pada javascript:
- Halaman web selesai melakukan loading
- Teks pada input field berubah nilainya
- Sebuah button diklik
- Adanya proses menghapus dan mengubah
- Dll
Dalam penerapannya seandainya Anda butuh melakukan reaksi tertentu di saat sebuah event terjadi.
Misalnya, ingin mengubah warna ketika sebuah button diklik.
Pemanggilan Javascript
Dengan javascript, kita bisa mendeteksi event dengan sintaks berikut:1# Langsung Pada Element HTML
Contoh:<elementHTML jenisEvent="NamaFungsiJS()">Bisa juga dengan menggunakan single quote:
<elementHTML jenisEvent='NamaFungsiJS()'>2# Membuat Object Function
Formatnya:object.onclick = function() {myScript};Contoh:
var contoh = document.getElementById('contohku');
button.onclick = function() {
alert("Selamat Datang!");
}Penjelasan:
Variabel contoh mengambil element HTML yang ber-id "contohku"
Lalu ketika diklik, maka akan menampilkan fungsi alert.
3# Menggunakan Fungsi addEventListener
Formatnya:object.addEventListener("event", myScript);Contoh:
var contoh = document.getElementById('contohku');
button.addEventListener("onclick", function() {
alert("Selamat Datang!");
});Macam-macam Event yang Banyak Digunakan dalam Javascript
| Event | Deskripsi |
|---|---|
| onchange | ketika sebuah element HMTL berubah nilainya |
| onclick | ketika user melakukan sebuah klik pada element HTML |
| onmouseover | ketika mouse / kursos mendekati objek element HTML |
| onmouseout | ketika mouse / kursor menjauhi objek element HTML |
| onkeydown | ketika user menginputkan sesuatu |
| onload | ketika browser telah menyelesaikan loading page |
Pembahasan:
1# Event Onclick
Event onclick biasanya digunakan untuk mendeteksi aksi klik pada sebuah elemen HTML.Event onclick berlaku untuk semua elemen HTML kecuali tag <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
Format sintaksnya:
<element onclick="namaFunction();"> // format ke 1
objeck.onclick = function() {myScript}; // format ke 2
objeck.addEventListener("click", myScript); // format ke 3Contoh Program:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Onclick</title>
<script type="text/javascript">
function sapa()
{
alert("Selamat Pagi");
}
</script>
</head>
<body>
<button onclick="sapa()">Sapa</button>
</body>
</html>2# Event Onchange
Event onchange digunakan untuk mendeteksi suatu perubahan pada sebuah elemen HTML.Event ini berlaku untuk pada elemen berikut:
<input/>
<select></select>
<textarea></textarea>Format Sintaksnya:
<element onchange="namaFunction();">
objeck.onchange = function() {myScript};
objeck.addEventListener("change", myScript);Contoh Program:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Onclick</title>
</head>
<body>
<input type="text" name="nama" id="input" onchange="ubah(this.value);">
<script type="text/javascript">
function ubah(val){
var input = document.getElementById('input');
input.onchange = function() {
alert('Nilai Baru = ' + val);
}
}
</script>
</body>
</html>3# Event Onmouseover
Event onmouseover pada javascript digunakan untuk mendeteksi jika mouse diarahkan ke sebuah elemen target.
Event ini berlaku untuk semua elemen HTML kecuali <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
Format sintaks:
<element onmouseover ="namaFunction();">
objeck.onmouseover = function() {myScript};
objeck.addEventListener("mouseover", myScript);Contoh Program:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Onmouseover</title>
<script type="text/javascript">
function ubah(){
var p = document.getElementById('text');
p.style.color = "blue";
p.style.fontWeight = "700";
}
</script>
</head>
<body>
<p id="text">Selamat Datang di Halaman Webku</p>
<button type="button" onmouseover="ubah();">Arahkan Mouse Ke Sini Untuk Mengubah</button>
</body>
</html>
4# Event Onmouseut
Event onmouseout digunakan untuk mendeteksi jika mouse digerakan keluar batas sebuah elemen.
Event ini berlaku untuk semua elemen HTML kecuali <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
Formatnya:
<element onmouseout ="namaFunction();">
objeck.onmouseout = function() {myScript};
objeck.addEventListener("mouseout", myScript);Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Onmouseout</title>
<script type="text/javascript">
function ubah(){
var p = document.getElementById('text');
p.style.color = "blue";
p.style.fontWeight = "700";
}
</script>
</head>
<body>
<p id="text">Selamat Datang di Halaman Webku</p>
<button type="button" onmouseout="ubah();">Arahkan Mouse Ke Sini, Lalu Tinggalkan Untuk Mengubah</button>
</body>
</html>Oke, demikianlah tutorial kali ini yang membahas tentang event-event pada javascript.
Semoga Anda bisa berkembang lebih baik dalam ilmu pemrograman bersama Saung IT.
Aamiin.
Comments