Javascript Dasar #8: Event Handling di JavaScript

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #8: Event Handling di JavaScript

Halo, teman-teman! Kali ini kita akan belajar tentang Event Handling di JavaScript. Event adalah tindakan yang terjadi di dalam aplikasi, seperti klik tombol, ketikan keyboard, atau perubahan status elemen. Dengan event handling, kita bisa menanggapi aksi-aksi tersebut dengan menjalankan fungsi tertentu.

Apa Itu Event?

Event adalah aksi yang terjadi pada elemen HTML, misalnya ketika pengguna mengklik tombol, menggerakkan mouse, atau mengetik di dalam form. Dengan menggunakan JavaScript, kita bisa menangani event tersebut untuk membuat interaksi yang lebih dinamis di halaman web.

Menambahkan Event Listener

Di JavaScript, kita dapat menangani event dengan menggunakan metode addEventListener(). Metode ini memungkinkan kita untuk menambahkan event handler ke elemen tertentu. Berikut adalah contoh untuk menangani event klik pada sebuah tombol:

<button id="myButton">Klik Aku!</button>

<script>
  let tombol = document.getElementById("myButton");

  tombol.addEventListener("click", function() {
    alert("Tombol diklik!");
  });
</script>

Pada contoh ini:

  • Kita mengambil elemen tombol dengan getElementById.
  • Kemudian, kita menambahkan event listener dengan addEventListener() yang akan mendengarkan event klik dan menjalankan fungsi ketika tombol tersebut diklik.

Jenis-Jenis Event

Berikut beberapa jenis event yang sering digunakan dalam JavaScript:

  1. click: Terjadi saat elemen diklik.
  2. mouseover: Terjadi saat mouse berada di atas elemen.
  3. keydown: Terjadi saat tombol keyboard ditekan.
  4. submit: Terjadi saat form dikirimkan.
  5. input: Terjadi saat data dimasukkan ke dalam form input.

Contoh menangani event mouseover:

<button id="hoverButton">Arahkan Mouse ke Sini</button>

<script>
  let tombolHover = document.getElementById("hoverButton");

  tombolHover.addEventListener("mouseover", function() {
    alert("Mouse berada di atas tombol!");
  });
</script>

Menggunakan Event dengan Parameter

Kadang kita perlu mengetahui lebih banyak informasi tentang event yang terjadi, seperti posisi mouse atau tombol keyboard yang ditekan. Untuk itu, kita bisa menggunakan parameter event di dalam fungsi event handler.

<input type="text" id="inputField" placeholder="Ketik sesuatu...">

<script>
  let inputField = document.getElementById("inputField");

  inputField.addEventListener("input", function(event) {
    console.log("Karakter yang diketik: " + event.target.value);
  });
</script>

Di sini, kita mendengarkan event input yang terjadi ketika pengguna mengetikkan sesuatu di dalam input field. event.target.value memberi kita akses ke nilai yang sedang diketik.

Menghentikan Event Default

Terkadang, kita tidak ingin aksi default terjadi setelah event ditangani. Misalnya, ketika kita mengirimkan form, kita bisa mencegah halaman untuk reload dengan menggunakan event.preventDefault().

<form id="myForm">
  <input type="text" placeholder="Nama kamu">
  <button type="submit">Kirim</button>
</form>

<script>
  let form = document.getElementById("myForm");

  form.addEventListener("submit", function(event) {
    event.preventDefault(); // Mencegah reload halaman
    alert("Form berhasil dikirim!");
  });
</script>

Pada contoh ini, ketika form disubmit, event handler akan mencegah form untuk mengirim data dan merefresh halaman, serta menampilkan pesan bahwa form telah dikirim.

Studi Kasus: Membuat Counter Klik

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Mari kita coba membuat aplikasi penghitung klik sederhana yang akan menghitung berapa kali tombol diklik.

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Counter Klik</title>
</head>
<body>
  <h1>Counter Klik</h1>
  <p>Jumlah klik: <span id="counter">0</span></p>
  <button id="klikButton">Klik Saya!</button>

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

JavaScript-nya (di file script.js):

let counter = 0;
let tombol = document.getElementById("klikButton");
let tampilkanCounter = document.getElementById("counter");

tombol.addEventListener("click", function() {
  counter++;
  tampilkanCounter.textContent = counter;
});

Penjelasan:

  • Kita menyimpan jumlah klik dalam variabel counter.
  • Setiap kali tombol diklik, event listener akan menambah nilai counter dan menampilkan jumlah klik terbaru di halaman.

Event handling ini akan sangat membantu untuk menciptakan interaksi yang lebih dinamis di halaman web kamu! Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga dengan event handling, kamu bisa membuat aplikasi web yang lebih interaktif dan menyenangkan!

Tutorial Terkait Lainnya

Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #5: Perulangan (Loops)

Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan...

Baca Tutorial
Javascript Dasar #2: Variabel, Tipe Data, dan Operator
Javascript Dasar #2: Variabel, Tipe Data, dan Operator

Hai, kembali lagi! Pada tutorial kedua ini, kita bakal membahas lebih dalam tentang variabel, tipe d...

Baca Tutorial
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya

Halo, kembali lagi! Kali ini kita akan membahas tentang Objek di JavaScript. Objek adalah tipe data ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #1: Pengenalan Javascript
Javascript Dasar #5: Perulangan (Loops)
Javascript Dasar #10: Error Handling
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python