Days
Hours
Minutes
Seconds
Selamat datang di tutorial JavaScript #7! 🚀
Dalam bagian ini, kita akan membahas Event—sebuah konsep fundamental yang membuat website kita menjadi interaktif dan dinamis. Memahami event adalah kunci untuk membuat halaman web yang merespons tindakan pengguna. Mari kita mulai!
Secara sederhana, event adalah sinyal dari browser bahwa ada sesuatu yang telah terjadi. Kejadian ini bisa dipicu oleh tindakan pengguna (seperti mengklik tombol atau menekan tombol keyboard) atau oleh browser itu sendiri (seperti halaman yang selesai dimuat).
Beberapa contoh event yang paling umum di JavaScript:
click: Ketika pengguna mengklik sebuah elemen.mouseover: Ketika kursor mouse diletakkan di atas sebuah elemen.keydown: Ketika sebuah tombol keyboard ditekan.submit: Ketika formulir dikirim.load: Ketika halaman web atau elemen selesai dimuat.
Untuk membuat halaman web merespons event, kita perlu “mendengarkan” event tersebut dan menentukan apa yang harus dilakukan saat event itu terjadi. Proses ini disebut event handling.
Ada beberapa cara untuk melakukan event handling, tetapi cara yang paling modern, fleksibel, dan direkomendasikan adalah menggunakan metode addEventListener().
addEventListener()
Metode addEventListener() adalah cara terbaik untuk menetapkan fungsi yang akan dijalankan ketika sebuah event terjadi pada sebuah elemen. Sintaksnya sederhana:
element.addEventListener('jenis_event', namaFunction);
element: Merupakan elemen HTML yang ingin kita beri “pendengar” event.'jenis_event': Nama event dalam bentuk string (misalnya, 'click', 'mouseover').namaFunction: Fungsi yang akan dieksekusi saat event terjadi.Fungsi ini sering disebut event handler atau callback function.
Mari kita buat contoh sederhana di mana kita akan mengubah teks sebuah tombol setiap kali tombol itu diklik.
Pertama, buat sebuah file HTML dengan satu tombol. Pastikan tombol memiliki ID agar kita mudah memilihnya di JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Event Handling</title>
</head>
<body>
<h1>Tutorial JavaScript #7</h1>
<button id="tombolKlik">Klik Saya!</button>
<script src="script.js"></script>
</body>
</html>
Sekarang, buat file script.js (atau tambahkan kode langsung di dalam tag <script>). Di sini, kita akan:
getElementById().event listener untuk event click.textContent dari tombol.// Dapatkan elemen tombol dari HTML
const tombol = document.getElementById('tombolKlik');
// Tambahkan event listener untuk event 'click'
tombol.addEventListener('click', function() {
// Fungsi ini akan dieksekusi saat tombol diklik
tombol.textContent = "Terima kasih!";
console.log('Tombol telah diklik!');
});
Ketika Anda membuka halaman HTML di browser dan mengklik tombol “Klik Saya!”, teksnya akan berubah menjadi “Terima kasih!”.
Anda juga bisa melihat di Console Browser bahwa pesan "Tombol telah diklik!" akan dicetak setiap kali tombol diklik.
Event adalah pemicu yang membuat halaman web kita interaktif. Dengan menggunakan addEventListener(), kita dapat dengan mudah menanggapi berbagai tindakan pengguna, membuat website yang tidak hanya menampilkan informasi, tetapi juga berinteraksi dengan pengunjung secara dinamis.
Latihan terbaik adalah mencoba berbagai jenis event (seperti mouseover atau keydown) pada elemen lain untuk melihat bagaimana mereka bekerja!
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
