Articles
Pengenalan ke TypeScript
Penanganan Event di TypeScript

Penanganan Event di TypeScript

Artikel ini menjelaskan penanganan event di TypeScript.

Anda dapat mempelajari metode penanganan event dan event khusus melalui contoh kode.

YouTube Video

Penanganan Event di TypeScript

Penanganan event di TypeScript dilakukan dengan cara yang sama seperti di JavaScript. Namun, TypeScript meningkatkan keamanan tipe sehingga Anda dapat menangani event dengan lebih aman dengan menggunakan tipe event yang sesuai. Dasar-dasar penanganan event melibatkan penambahan listener event ke elemen DOM dan menjalankan aksi sebagai respons terhadap operasi pengguna.

Menambah Event Listener

Event listener ditambahkan ke elemen DOM menggunakan metode addEventListener. Sebagai contoh, untuk menangani event klik, Anda dapat melakukan hal berikut:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}
  • Dalam kode ini, addEventListener digunakan untuk mendaftarkan penangan event klik pada elemen DOM yang ditentukan.

Tipe Event di TypeScript

Di TypeScript, objek event yang diterima pada event listener akan secara otomatis berisi tipe yang sesuai. Objek event memiliki properti yang berbeda tergantung pada tipe event, namun tipe dasarnya adalah Event.

Dengan menggunakan tipe yang benar untuk setiap event, Anda dapat memanfaatkan keamanan tipe TypeScript dalam pengembangan Anda.

Tipe-Tipe Event Utama

  1. Event Event adalah tipe dasar untuk event umum. Digunakan untuk hal-hal seperti submit form atau selesai memuat halaman.
1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}
  • Kode ini mendeteksi event submit pada formulir, mencegah aksi submit default, dan menampilkan pesan ke konsol sebagai gantinya.

  1. MouseEvent

    MouseEvent adalah jenis event yang terkait dengan aksi mouse seperti klik dan pergerakan mouse. Anda dapat memperoleh informasi tentang koordinat mouse dan tombol mana yang diklik.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}
  • Kode ini mendapatkan koordinat mouse saat tombol diklik dan menampilkannya di konsol.
  1. KeyboardEvent KeyboardEvent adalah jenis event yang terkait dengan input keyboard. Anda dapat mengakses tombol yang ditekan dan status tombol modifikasi (Shift, Alt, Ctrl, dll).
1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});
  • Kode ini menampilkan nama tombol yang ditekan dan, jika tombol Ctrl ditekan, juga menampilkan informasi tersebut ke konsol.
  1. InputEvent InputEvent adalah jenis event yang terkait dengan perubahan di bidang input. Ini digunakan saat nilai dari sebuah field teks atau textarea telah berubah.
1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}
  • Kode ini menampilkan isi dari bidang input di konsol setiap kali nilainya berubah.
  1. FocusEvent FocusEvent adalah jenis event yang terjadi saat sebuah elemen mendapatkan atau kehilangan fokus.
 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}
  • Kode ini menampilkan "Focused" di konsol saat bidang input mendapatkan fokus, dan "Blurred" saat kehilangan fokus.

Menangani Event Kustom dengan Penegasan Tipe

Untuk event kustom atau ketika inferensi tipe TypeScript tidak berfungsi, Anda dapat menentukan tipe secara eksplisit dengan penegasan tipe.

Misalnya, untuk menangani event pada field input tertentu (HTMLInputElement), tentukan tipenya seperti berikut:.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}
  • Kode ini menggunakan penegasan tipe untuk memperlakukan target event sebagai HTMLInputElement dan menampilkan nilainya di konsol.

Menghapus Event Listener

Anda dapat menghapus event listener menggunakan removeEventListener. Untuk itu, Anda harus melewatkan handler event yang sama dengan yang awalnya ditambahkan.

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}
  • Kode ini menambahkan pendengar event klik ke tombol, lalu menghapusnya dengan menentukan handler yang sama.

Membuat Event Kustom

Di TypeScript, selain event standar, Anda juga dapat membuat dan memanggil event kustom. Gunakan class CustomEvent untuk membuat event kustom dan memicu (trigger) dengan metode dispatchEvent.

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}
  • Kode ini membuat event khusus menggunakan CustomEvent, mengirimkannya ke elemen, dan menampilkan detailnya di konsol.

Mengontrol Propagasi Event

Saat sebuah event terjadi, secara default event tersebut akan menggelembung (bubble) ke elemen induk. Untuk mencegah hal ini, gunakan event.stopPropagation(). Anda juga dapat menggunakan preventDefault() untuk mencegah perilaku default browser.

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}
  • Kode ini menonaktifkan aksi default saat tombol diklik, menghentikan perambatan event, dan menjalankan pemrosesan khusus.

Ringkasan

Penanganan event di TypeScript pada dasarnya sama seperti di JavaScript, namun dengan definisi tipe yang tepat Anda dapat bekerja dengan objek event dan elemen DOM secara aman dan andal. Dengan menambahkan dan menghapus event listener, menerapkan tipe event, dan menggunakan penegasan tipe, Anda dapat mencapai penanganan event yang lebih jelas dan minim kesalahan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Shadow DOM dalam TypeScriptFetch/XMLHttpRequest di TypeScript