Window.addeventlistener Javascript

Window.addeventlistener Javascript

3 min read Jun 20, 2024
Window.addeventlistener Javascript

Memahami window.addEventListener di JavaScript

window.addEventListener adalah sebuah metode dalam JavaScript yang memungkinkan Anda untuk menambahkan event listener ke objek window. Event listener ini akan "menunggu" kejadian tertentu terjadi pada objek window, seperti penekanan tombol keyboard, klik mouse, atau perubahan ukuran jendela browser.

Keuntungan Menggunakan window.addEventListener

  • Kemudahan Pengelolaan: window.addEventListener mempermudah Anda untuk menambahkan dan menghapus event listener secara dinamis, tanpa harus memodifikasi kode lain.
  • Organisasi Kode: Dengan memisahkan logika event listener dari kode utama, Anda dapat menjaga kode tetap terstruktur dan mudah dipahami.
  • Fleksibilitas: Anda dapat menambahkan banyak event listener untuk event yang sama, dan setiap listener dapat memiliki fungsi yang berbeda.
  • Kompatibilitas: Metode ini didukung oleh semua browser modern.

Cara Menggunakan window.addEventListener

Berikut adalah format dasar penggunaan window.addEventListener:

window.addEventListener('event-name', function(event) {
  // Kode yang akan dijalankan saat event terjadi
});

Keterangan:

  • event-name: Nama event yang ingin Anda tangani. Contoh: click, resize, scroll, keydown.
  • function(event): Fungsi yang akan dieksekusi saat event terjadi. Parameter event berisi informasi tentang event tersebut.

Contoh Penggunaan

1. Menangani Event resize:

window.addEventListener('resize', function(event) {
  console.log("Jendela browser telah diubah ukurannya!");
});

Kode ini akan menampilkan pesan ke console setiap kali ukuran jendela browser diubah.

2. Menangani Event keydown:

window.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert("Anda menekan tombol Enter!");
  }
});

Kode ini akan menampilkan pesan peringatan jika pengguna menekan tombol Enter.

3. Menghapus Event Listener:

Untuk menghapus event listener yang telah ditambahkan, gunakan metode removeEventListener:

window.removeEventListener('resize', function(event) {
  // Kode yang akan dijalankan saat event terjadi
});

Pastikan Anda menyertakan fungsi yang sama yang digunakan saat menambahkan listener.

Kesimpulan

window.addEventListener merupakan alat penting dalam JavaScript untuk menangani berbagai event yang terjadi pada objek window. Dengan memanfaatkan metode ini, Anda dapat membuat aplikasi web yang interaktif dan responsif terhadap aksi pengguna.