Tutorial JavaScript Pemula Part 5 : Belajar Dan Cara Penggunaan Event Dalam JavaScript
Tutorial JavaScript Pemula Part 5 : Belajar Dan Cara Penggunaan Event Dalam JavaScript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan memasuki Seri baru yaitu Belajar Dan Cara Penggunaan Event Dalam JavaScript.
Sebelum kamu baca artikel ini ada baiknya kamu membaca artikel yang sebelumnya terlebih dahulu yang berjudul Memahami Function PadaJavaScript agar nantinya kamu jauh lebih mengerti dengan apa itu javascript dan dasar-dasar javascript.
Belajar Dan Cara Penggunaan Event Dalam JavaScript
Pengertian Event
Apa sih sebenarnya event ini? Mungkin pertanyaan itu akan hadir didalam kepala kamu apalagi kamu baru belajar javascript. Event itu merupakan suatu perlakuan yang dilakukan terhadap suatu elemen HTML. Sebagai contoh kamu mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Kamu harus memasukan atribut EVENT onclick pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Kamu inginkan.
Jenis – Jenis Event Pada Javascript
Ada beberapa jenis event pada javascript yang sering digunakan oleh banyak orang, yaitu sebagai berikut:
- Onblur adalah ketika suatu elemen tidak focus
- Onchange adalah ketika nilai suatu elemen diubah
- Onclick adalah ketika suatu elemen diklik
- Ondblclick adalah ketika suatu elemen didobelklik
- Onerror adalah ketika error
- Onfocus adalah ketika suatu elemen sedang fokus
- Onkeydown adalah ketika tombol huruf pada keyboard ditekan
- Onkeypress adalah ketika tombol keyboard ditekan
- Onkeyup adalah ketika tombol keyboard di lepas
- Onload adalah ketika dokumen di-load
- Onmousedown adalah ketika tombol mouse ditekan
- Onmousemove adalah ketika mouse digerakkan
- Onmouseout adalah ketika mouse keluar dari area suatu elemen
- Onmouseover adalah ketika mouse melewati area suatu elemen
- Onmouseup adalah ketika tombol mouse dilepas setelah diklik
- Onreset adalah ketika form direset
- Onresize adalah ketika elemen diubah ukuranya
- Onselect adalah ketika suatu elemen dipilih
- Onsubmit adalah ketika data form dikirim
- Onunload ketika keluar dari suatu dokumen
Itulah beberapa event yang saya ketahui jika ada tambahan silahkan coment di coloum comentar ya biar saya tambah atau koreksi jika terdapat kata-kata yang salah.
Cara Penggunaan Event
Disini saya akan mencontohkan salah satu cara penggunaan event pada javascript maka dari itu silahkan perhatikanlah code dibawah ini dan jangan lupa untuk kamu praktekan nya ya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<button onclick="pesan()">Klik Disini</button>
<div id="muncul"></div>
</body>
<script type="text/javascript">
function pesan(){
document.getElementById("muncul").innerHTML = "<p>Berhasil ditekan</p>";
}
</script>
</html>
Hasilnya akan seperti dibawah ini :
 |
| Jika Button Ditekan |
Pada code diatas terdapat event onclick="pesan()" pada button yang didalamnya terdapat function pesan() yang jika kalau diklik maka akan menjalankan functionnya.
function pesan(){
document.getElementById("muncul").innerHTML = "<p>Berhasil ditekan</p>";
}
Dan pada code diatas kita membuat function pesan() yang nantinya hasilnya akan ditampilkan pada elemet html yang berID muncul.
Penutupan
Begitulah sedikit penjelasan mengenai event pada javascript untuk selebihnya kamu bereksplorasi sendiri karena akan cepat mengerti jika kamu mencoba dan memprakteknnya, sebelum itu silahkan baca artikel yang berjudul Memahami Function Pada JavaScript karena selebihnya kita akan mengunakan function untuk praktek nantinya.
Semoga Bermanfaat!!