Belajar Javascript (Part11): Event Handler Javascript
- kali ini kita akan berguru Event JavaScript. Baik itu event yang dilakukan pribadi didalam Tag HTML atau didalam Elemen HTML yang disebut Event Handler.
Event JavaScript yaitu interaksi berupa kejadian yang dilakukan JavaScript didalam halaman web.
Seperti referensi event JavaScript:
- Interaksi ketika pengunjung mengKlik mouse.
- Interaksi ketika mouse melewati/meninggalkan suatu teks/elemen lain.
- Interaksi dikala 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 sanggup di sanksi ketika suatu kejadian telah terjadi, menyerupai referensi diatas, yaitu pengunjung telah mengklik mouse, barulah instruksi 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 goresan pena 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 goresan pena ini</div> <script> function Mover(x) { x.innerHTML ="Terima kasih"; } function Mout(x) { x.innerHTML ="Mendekat ke goresan pena 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 teman sanggup bereksperimen lebih baik lagi wacana Event Handler JavaScript ini, supaya bermanfaat.
Ada pertanyaan wacana Belajar JAVASCRIPT ?
- Salam -