Articles
Pengenalan kepada TypeScript
Pengendalian Acara dalam TypeScript

Pengendalian Acara dalam TypeScript

Artikel ini menerangkan pengendalian acara dalam TypeScript.

Anda boleh mempelajari kaedah pengendalian acara dan acara tersuai melalui contoh kod.

YouTube Video

Pengendalian Acara dalam TypeScript

Pengendalian acara dalam TypeScript dilakukan dengan cara yang sama seperti dalam JavaScript. Walau bagaimanapun, TypeScript meningkatkan keselamatan jenis, membolehkan anda mengendalikan acara dengan selamat menggunakan jenis acara yang sesuai. Asas pengendalian acara adalah menambah pendengar acara pada elemen DOM dan melaksanakan tindakan sebagai respons kepada operasi pengguna.

Menambah Pendengar Acara

Pendengar acara ditambah kepada elemen DOM menggunakan kaedah addEventListener. Sebagai contoh, untuk mengendalikan acara klik, anda boleh melakukan perkara berikut:.

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

Jenis Acara dalam TypeScript

Dalam TypeScript, objek event yang diterima oleh pendengar acara akan diberikan jenis yang sesuai secara automatik. Objek event mempunyai sifat yang berbeza mengikut jenis acara, tetapi jenis asasnya ialah Event.

Dengan menggunakan jenis yang sesuai untuk setiap acara, anda boleh memanfaatkan keselamatan jenis TypeScript dalam pembangunan anda.

Jenis Acara Utama

  1. Event Event ialah jenis asas untuk acara biasa. Digunakan untuk perkara seperti penghantaran borang atau siap pemuatan 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}
  • Kod ini mengesan acara submit pada borang, menghalang aksi submit lalai, dan memaparkan mesej ke konsol sebagai gantinya.

  1. MouseEvent

    MouseEvent ialah jenis acara berkaitan dengan tindakan tetikus seperti klik dan pergerakan tetikus. Anda boleh mendapatkan maklumat tentang koordinat tetikus dan butang 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}
  • Kod ini mendapatkan koordinat tetikus apabila butang diklik dan memaparkannya di konsol.
  1. KeyboardEvent KeyboardEvent ialah jenis acara berkaitan input papan kekunci. Anda boleh mengakses kekunci yang ditekan dan keadaan kekunci pengubah suai (Shift, Alt, Ctrl, dsb.).
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});
  • Kod ini memaparkan nama kekunci yang ditekan dan, jika kekunci Ctrl ditekan, juga memaparkan maklumat itu ke konsol.
  1. InputEvent InputEvent ialah jenis acara berkaitan perubahan pada medan input. Ia digunakan apabila nilai pada medan 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}
  • Kod ini memaparkan kandungan medan input ke konsol setiap kali nilainya berubah.
  1. FocusEvent FocusEvent ialah jenis acara yang berlaku apabila sesuatu elemen menerima atau hilang tumpuan.
 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}
  • Kod ini memaparkan "Focused" di konsol apabila medan input mendapat tumpuan, dan "Blurred" apabila ia kehilangan tumpuan.

Mengendalikan Acara Tersuai dengan Pengesahan Jenis

Untuk acara tersuai atau apabila penentuan jenis dalam TypeScript tidak berfungsi, anda boleh menyatakan jenis secara jelas menggunakan pengesahan jenis.

Contohnya, untuk mengendalikan acara bagi medan input tertentu (HTMLInputElement), nyatakan jenis 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}
  • Kod ini menggunakan pengesahan jenis untuk menganggap sasaran acara sebagai HTMLInputElement dan memaparkan nilainya di konsol.

Membuang Pendengar Acara

Anda boleh membuang pendengar acara menggunakan removeEventListener. Untuk ini, anda perlu memberikan pengendali acara yang sama seperti yang telah ditambah sebelumnya.

 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}
  • Kod ini menambah pendengar acara klik pada butang dan kemudian menghapuskannya dengan menentukan pengendali yang sama.

Mencipta Acara Tersuai

Dalam TypeScript, selain acara standard, anda juga boleh mencipta dan melaksanakan acara tersuai. Gunakan kelas CustomEvent untuk mencipta acara tersuai dan aktifkannya dengan kaedah 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}
  • Kod ini mencipta acara tersuai menggunakan CustomEvent, menghantarnya kepada elemen, dan memaparkan butirannya di konsol.

Mengawal Perambatan Acara

Apabila acara berlaku, secara lalai ia akan membuih (merebak ke elemen ibu bapa). Untuk menghalang perkara ini, gunakan event.stopPropagation(). Anda juga boleh menggunakan preventDefault() untuk menghalang tingkah laku lalai pelayar.

 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}
  • Kod ini menyahaktifkan aksi lalai apabila butang diklik, menghentikan perambatan acara, dan melaksanakan pemprosesan tersuai.

Ringkasan

Pengendalian acara dalam TypeScript pada asasnya sama seperti dalam JavaScript, tetapi dengan takrifan jenis yang betul, anda boleh bekerja dengan objek acara dan elemen DOM dengan lebih selamat dan boleh dipercayai. Dengan menambah serta membuang pendengar acara, menggunakan jenis acara, dan pengesahan jenis, anda boleh mencapai pengendalian acara yang lebih jelas dan kurang terdedah kepada ralat.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Shadow DOM dalam TypeScriptFetch/XMLHttpRequest dalam TypeScript