Javascript Dasar #8: Event Handling di JavaScript

Author Erick Irwansyah
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 #10: Error Handling
Javascript Dasar #10: Error Handling

Halo, teman-teman! Di tutorial kali ini, kita akan membahas tentang Error Handling dan Debugging di ...

Baca Tutorial
Javascript Dasar #1: Pengenalan Javascript
Javascript Dasar #1: Pengenalan Javascript

Hai, apa kabar? Semoga baik-baik aja ya! Pada tutorial pertama ini, kita bakal mulai mengenal apa it...

Baca Tutorial
Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #1: Pengenalan Javascript
Javascript Dasar #9: Asynchronous JavaScript & Promises
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php