SeniKoding.com - kali ini kita akan belajar Event JavaScript. Baik itu event yang dilakukan langsung didalam Tag HTML atau didalam Elemen HTML yang disebut Event Handler.
Event JavaScript adalah interaksi berupa peristiwa yang dilakukan JavaScript didalam halaman web.
Seperti contoh event JavaScript:
- Interaksi ketika pengunjung mengKlik mouse.
- Interaksi ketika mouse melewati/meninggalkan suatu teks/elemen lain.
- Interaksi saat mouse berada diatas teks/elemen lain.
- Interaksi ketika input suatu data.
- Interaksi ketika halaman telah dimuat.
- Interaksi adanya peringatan (alert, prompt, confirm).
- Dan masih banyak lagi.
Tutorial Belajar JavaScript Event Handler JavaScript
JavaScript dapat di eksekusi ketika suatu peristiwa telah terjadi, seperti contoh diatas, yaitu pengunjung telah mengklik mouse, barulah kode JavaScript di eksekusi.
Dibawah ini akan dicontohkan Event JavaScript yang berada didalam Tag HTML:
Contoh 1 (H1):
<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> </head> <body> <h1 onClick="this.innerHTML='Perubahan telah terjadi.'">Klik tulisan ini</h1> </body> </html>
Contoh 2 (button "alert"):
<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> </head> <body> <button onClick="alert('Apa kabar dengan Anda?')">Test</button> </body> </html>
Baca juga: Belajar Event di Jquery
Kemudian dibawah ini akan dicontohkan Event JavaScript yang berada didalam Elemen HTML:
Contoh 1 (OnMouseOver & OnMouseOut):
<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> </head> <body> <div onmouseover="Mover(this)" onmouseout="Mout(this)" style="border:1px solid red; padding:10px; background:yellow; display:inline-block;">Mendekat ke tulisan ini</div> <script> function Mover(x) { x.innerHTML ="Terima kasih"; } function Mout(x) { x.innerHTML ="Mendekat ke tulisan ini"; } </script> </body> </html>
Contoh 2 (Onfocus):
<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> </head> <body> <h3>Isi data ini:</h3> <p><input type="text" onfocus="data(this)"></input></p> <script> function data(x) { x.style.background = "red"; } </script> </body> </html>
Contoh 3 (Onload body):
<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> </head> <body onload="myfunction(this)" style="background:yellow;"> <p>Leanding page...</p> <script> function myfunction(x) { alert('halaman peringatan'); } </script> </body> </html>
Berikutnya sobat bisa bereksperimen lebih baik lagi tentang Event Handler JavaScript ini, semoga bermanfaat.
Ada pertanyaan tentang Belajar JAVASCRIPT ?
- Salam -
jelaskan juga dong kalo onfocus buat apa, onmouseover buat apa, dll. terus ada apa aja jenis event handlernya
BalasHapusonmouseover berfungsi ketika mouse berada diatas objek, kebalikan dengan onmouseout, dan onfocus berfungsi untuk interaksi yg dilakukan ketika inputan sedang dilakukan.
BalasHapuslebih pahamnya lngsung dipraktikan di browser gan. terimakasih selamat belajar.