Javascript Events

PreviousJavascript Object NextJS Web Storage API

Last updated 1 year ago

Was this helpful?

Javascript Events

Apa itu Events?

Events pada Javascript merupakan sebuah kejadian yang terjadi pada suatu elemen. Misalnya, Anda mempunyai sebuah button “show” pada aplikasi, dan saat button ditekan akan menampilkan sebuah alert.

Untuk menerapkan itu, Anda harus memasukan atribut Events onclick pada elemen button dan mengisinya dengan sebuah function atau kode Javascript inline yang berisi kejadian yang Anda inginkan.

Macam-macam Events

Beberapa events Javascript yang sering digunakan sebagai berikut:

Events

Keterangan

onclick

Event jika sebuah elemen HTML diklik

onchange

Event jika sebuah elemen HTML berubah

onmouseover

Event jika sebuah elemen HTML diletakkan kursor mouse

onmouseout

Event jika kursor mouse meninggalkan elemen HTML

onkeydown

Event jika terjadi pengetikan pada elemen HTML

onload

Event saat elemen atau halaman dibuka

Contoh Penggunaan Events Pertama

Pada contoh pertama ini, sebuah button diberi attribute onclick dengan value alert(). Ketika tombol ditekan, maka akan tampil sebuah alert.

 <button onclick="alert('Halo semua')">Say Halo</button>

Contoh Penggunaan Events Kedua

Pada contoh di bawah ini terdapat 1 buah input text, button dan unorder list. Pada button diberi attribute onclick dengan value setNote(). setNote() merupakan sebuah function pada script.js yang akan mengubah konten pada elemen yang ber-id list. Jika button ditekan, maka function setNote() akan dipanggil, dan mengubah konten <ul id="list"> dengan mengambil value dari <input type="text" id="note">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Event</title>
</head>
<body>
    <input type="text" id="note">
    <button onclick="setNote()">Kirim</button>

    <ul id="list"></ul>
    
    <script src="script.js"></script>
</body>
</html>

let txtNote = document.getElementById("note");
let listNote = document.getElementById("list");

function setNote() {
  listNote.innerHTML += `<li>${txtNote.value}</li>`;
}

Contoh Penggunaan Events Ketiga

Pada contoh ketiga elemen HTML yang digunakan sama seperti pada contoh kedua. Ada sedikit perbedaan pada button, yaitu tidak menggunakan property onclick, tetapi diberi property id="btnKirim". Kemudian pada script.js menggunakan addEventListener yang berfungsi untuk membangkitkan event jika button ditekan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Event</title>
</head>
<body>
    <input type="text" id="note">
    <button id="btnKirim">Kirim</button>

    <ul id="list"></ul>

    <script src="script.js"></script>
</body>
</html>

let txtNote = document.getElementById("note");
let listNote = document.getElementById("list");
let btnKirim = document.getElementById("btnKirim");

btnKirim.addEventListener("click", function () {
  listNote.innerHTML += `<li>${txtNote.value}</li>`;
});

Referensi