Peristiwa (events) adalah tindakan yang terjadi di dalam browser, seperti klik mouse, penekanan tombol keyboard, pengiriman formulir, atau pemuatan halaman. Dalam JavaScript, Anda dapat menangani peristiwa ini dengan menambahkan apa yang disebut "event listeners" ke elemen HTML yang bersangkutan. Berikut adalah cara menangani peristiwa dan contoh penggunaannya dalam JavaScript:
### Menambahkan Event Listener:
Anda dapat menambahkan event listener ke elemen HTML dengan menggunakan metode `addEventListener()`. Anda memberikan nama peristiwa yang ingin Anda tangani (seperti "click" atau "submit") dan fungsi penangan peristiwa (event handler).
```javascript
elemen.addEventListener(peristiwa, penangan);
```
### Contoh 1: Klik Tombol
Berikut adalah contoh penanganan peristiwa klik tombol:
```html
<button id="tombol">Klik Saya</button>
<script>
var tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
alert("Tombol telah diklik!");
});
</script>
```
### Contoh 2: Pengiriman Formulir
Berikut adalah contoh penanganan peristiwa pengiriman formulir:
```html
<form id="formulir">
<input type="text" id="nama" placeholder="Nama">
<button type="submit">Kirim</button>
</form>
<script>
var formulir = document.getElementById("formulir");
formulir.addEventListener("submit", function(event) {
event.preventDefault(); // Mencegah pengiriman formulir
var nama = document.getElementById("nama").value;
alert("Nama yang diinputkan: " + nama);
});
</script>
```
Dalam contoh ini, `event.preventDefault()` digunakan untuk mencegah pengiriman formulir agar halaman tidak segar setelah tombol "Kirim" ditekan.
### Jenis Peristiwa Lainnya:
Selain "click" dan "submit", masih ada banyak jenis peristiwa lainnya yang dapat Anda tangani, seperti "mouseover", "keydown", "change", dan banyak lagi. Anda dapat menemukan daftar lengkap peristiwa yang didukung oleh JavaScript di dokumentasi resminya.
### Penghapusan Event Listener:
Anda juga dapat menghapus event listener dari sebuah elemen menggunakan metode `removeEventListener()`.
```javascript
elemen.removeEventListener(peristiwa, penangan);
```
Dengan menggunakan penangan peristiwa (event handling), Anda dapat membuat halaman web yang lebih interaktif dan dinamis. Hal ini memungkinkan Anda untuk merespons tindakan pengguna dengan menjalankan kode JavaScript tertentu ketika peristiwa terjadi.
No comments:
Post a Comment