Contoh Penggunaan Event pada JavaScript

Event pada pemrograman JavaScript adalah suatu kejadian (dalam konteks program komputer) yang terjadi dan disetiap kejadian tersebut bisa dibuatkan tindakan.

Beberapa contoh kejadian dalam hal ini seperti saat suatu area pada sebuah halaman web seperti button, card, form atau kolom input di klik atau saat mouse di arahkan ke area tersebut dan mengakibatkan munculnya (triggered) sesuatu maka yang demikian dikenal dengan event.

Ada banyak event yang dapat digunakan pada JavaScript yang dapat dibagi ke dalam macam-macam type seperti keyboard Event atau mouse Event.

Silahkan perhatikan tabel di bawah ini untuk mengetahui bagaimana perangkat input yang kita miliki (keyboard,mouse) dapat di kenali inputnya dan diberi event.

Tabel Event JavaScript

EventKeteranganEvent type
onclickKetika pengguna melakukan klikMouseEvent
onmouseupKetika pengguna melepaskan mouse setela di tekanMouseEvent
onmousedownKetika pengguna menekan mouse dan ditahanMouseEvent
onmouseoverKetika pengguna mengarahan kursor ke suatu areaMouseEvent
keydownKetika penguna menekan sebuah key di kolom inputKeyboardEvent
keypressKetika penguna menekan sebuah key di kolom inputKeyboardEvent
Tabel event JavaScript

list event pada tabel di atas terdiri dari 2 event type yaitu MouseEvent dan KeyboardEvent. Pada tutorial lanjutan belajar JavaScript ini kita akan membahas event berdasarkan kedua type tersebut. Contoh – contoh di bawah ini adalah beberapa bentuk event yang menggunakan type MouseEvent dan KeyboardEvent.

Penggunaan Event pada JavaScript

1. onclick

Onclick event merupakan salah satu event mouse (MouseEvent). Pada contoh di bawah ini sebuah area dengan id custom-area jika di klik akan berubah warna menjadi merah:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>onclick</title>
</head>

<body>
    <button>Test</button>
    <div id="custom-area">Ini adalah custom area</div>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = () => {
            document.getElementById('custom-area').style.backgroundColor = 'red';
        }
    </script>

</body>

</html>

2. onmouseup dan onmmousdown

onmouseup dan onmousedown adalah event yang difungsikan untuk memperoleh hasil saat mousedown dan mouseup. Contoh script dibawah ini merubah background color custom-area mejadi 2 warna saat dilakukan mouse Up dan mouse Down:

<!DOCTYPE html>
<html>

<body>
    <div id="custom-area" onmousedown="mouseDown()" onmouseup="mouseUp()">
        <p>Ini adalah custom area onmousedown dan onmouseup</p>
    </div>

    <script>
        mouseDown = () => {
            document.getElementById('custom-area').style.backgroundColor = 'red';
        }
        mouseUp = () => {
            document.getElementById('custom-area').style.backgroundColor = 'green';
        }
    </script>

</body>

</html>

3. onmouseover dan onmouseout

onmouseover adalah event yang dapat bekerja saat kursur mouse di arahkan pada suatu bidang. Untuk menormalkan area yang telah berubah oleh onmouseover dapat digunakan onmouseout sebagai kebalikan dari onmouseover. Contoh dari onmouseover event javascript dapat dilihat pada script di bawah ini:

<!DOCTYPE html>
<html>

<body>
    <p id="mytext" onmouseover="bold()" onmouseout="normal()">
        ini adalah contoh penerapan onmouseover dan onmouseout
    </p>

    <script>
        bold = () => {
            document.getElementById('mytext').style.fontWeight = 'bold';
        }
        normal = () => {
            document.getElementById('mytext').style.fontWeight = '';
        }
    </script>

</body>

</html>

4. onkeypress

Onkeypress adalah salah satu event dari tipe keyboardEvent. Event ini bekerja saat sebuah karakter diketik pada halaman kolom input. Contoh dari event onkeypress dapat dilihat pada script di bawah ini:

<!DOCTYPE html>
<html>
<body>
<h1>onkeypress</h1>
<p>onkeypress adalah fungsi yang berjalan saat sebuah tombol di tekan pada sebuah kolom input</p>

<input type="text" onkeypress="myFunction()">

<script>
function myFunction() {
  alert("sebuah tombol diklick");
}
</script>

</body>
</html>

5. onkeyup

onkeyup juga merupakan event dari keyboardEvent. perbedaan antara onkeyup dan onkeypress adalah onkeypress bekerja saat kita mengetikkan sesuatu pada keyboard. Sedangkan onkeyup bekerja di saat kita melepaskan sebuah karakter yang diketik.

script di bawah ini adalah contoh dari onkeyup

contoh onkeyup merubah karatek yang diinput menjadi upercase/huruf besar

<!DOCTYPE html>
<html>
<head>
    <title>onkeyup</title>
</head>
<body>
    <p>Contoh merubah input karakter lower to uper dengan keyup</p>
    Input Karakter <input type="text" id="char" onkeyup="onkeyUp()">

    <script>
        const inputText = document.getElementById("char");

        inputText.onkeyUp = () => {
            inputText.value = inputText.value.toUpperCase();  
        }        
    </script>

</body>

</html>

6. onkeydown

onkeydown adalah salah satu dari keyboardEvent. perbedaan antara onkeydown dan onkeyup adalah onkeydown bekerja (trigerred) saat kita menekan suatu karakter pada keyboard.

Contoh event onkeydown javascript di bawah ini memiliki kesamaan dengan onkeyup perbedaan terdapat pada opsi fungsi onkeyup dan onkeydown.

<!DOCTYPE html>
<html>
<head>
    <title>onkedown</title>
</head>
<body>
    <p>Contoh merubah input karakter lower to uper dengan keydown</p>
    Input Karakter <input type="text" id="char" onkeydown="onkeyDown()">

    <script>
        const inputText = document.getElementById("char");

        inputText.onkeyDown = () => {
            inputText.value = inputText.value.toUpperCase();  
        }        
    </script>

</body>

</html>

Leave a comment