Belajar JavaScript (Part11): Event Handler JavaScript

event handler javascript

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.

- Salam -


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar JavaScript (Part11): Event Handler JavaScript"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -