Pag-handle ng Event sa TypeScript

Articles

Ipinaliliwanag ng artikulong ito ang paghawak ng mga kaganapan sa TypeScript.

Matututuhan mo ang mga pamamaraan ng paghawak ng kaganapan at mga custom na kaganapan sa pamamagitan ng mga halimbawa ng code.

YouTube Video

Pag-handle ng Event sa TypeScript

Ang pag-handle ng event sa TypeScript ay ginagawa gaya ng sa JavaScript. Gayunpaman, pinapabuti ng TypeScript ang type safety, kaya maaari mong hawakan ang mga event nang mas ligtas sa pamamagitan ng paggamit ng angkop na mga uri ng event. Ang mga batayan ng pag-handle ng event ay tumutukoy sa pagdaragdag ng event listeners sa mga elemento ng DOM at pagsasagawa ng mga aksyon bilang tugon sa mga operasyon ng user.

Pagdaragdag ng Event Listeners

Ang mga event listener ay idinadagdag sa mga elemento ng DOM gamit ang method na addEventListener. Halimbawa, upang mag-handle ng click event, gagawin mo ang mga sumusunod:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

Sa code na ito, ginagamit ang addEventListener upang magrehistro ng handler para sa click event sa tinukoy na DOM element.

Mga Uri ng Event sa TypeScript

Sa TypeScript, ang event object na natatanggap sa event listener ay awtomatikong tinutukoy sa angkop na uri. Ang event object ay may iba't ibang mga property depende sa uri ng event, pero ang base type nito ay Event.

Sa paggamit ng tamang uri para sa bawat event, mapapakinabangan mo ang type safety ng TypeScript sa iyong pag-develop.

Pangunahing Mga Uri ng Event

Event Ang Event ay ang pangunahing uri para sa mga karaniwang kaganapan. Ginagamit para sa mga bagay gaya ng pagsumite ng form o tapos na ang pag-load ng pahina.

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}

Tinutukoy ng code na ito ang submit event ng form, pinipigilan ang karaniwang gawain ng submit, at naglalabas ng mensahe sa console bilang kapalit.

MouseEvent

Ang MouseEvent ay isang uri ng kaganapan na may kaugnayan sa mga aksyon ng mouse gaya ng pag-click at paggalaw ng mouse. Maaari mong makuha ang impormasyon tungkol sa coordinates ng mouse at kung aling button ang na-click.

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}

Kinukuha ng code na ito ang mouse coordinates kapag na-click ang button at ipinapakita ang mga ito sa console.

KeyboardEvent Ang KeyboardEvent ay isang uri ng kaganapan na may kaugnayan sa input mula sa keyboard. Maaari mong ma-access ang key na pinindot at ang estado ng modifier keys (Shift, Alt, Ctrl, atbp.).

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});

Ipinapakita ng code na ito ang pangalan ng pindot na key, at kung nakapindot din ang Ctrl key, ilalabas din ang impormasyong iyon sa console.

InputEvent Ang InputEvent ay isang uri ng kaganapan na may kaugnayan sa pagbabago sa mga input field. Ginagamit ito kapag nagbago ang halaga ng isang text field o textarea.

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}

Ipinapakita ng code na ito ang nilalaman ng input field sa console sa tuwing nagbabago ang halaga nito.

FocusEvent Ang FocusEvent ay isang uri ng kaganapan na nangyayari kapag ang isang elemento ay nakukuha o nawawala ang focus.

 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}

Ipinapakita ng code na ito ang "Focused" sa console kapag naka-focus ang input field, at "Blurred" kapag nawala ang focus.

Pag-handle ng Custom Events gamit ang Type Assertion

Para sa mga custom na event o kapag hindi gumana ang type inference ng TypeScript, maaari mong hayagang tukuyin ang uri gamit ang type assertions.

Halimbawa, upang mag-handle ng event para sa isang partikular na input field (HTMLInputElement), tukuyin ang uri sa ganitong paraan:.

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}

Gumagamit ang code na ito ng type assertion para tratuhin ang event target bilang isang HTMLInputElement at ipakita ang halaga nito sa console.

Pag-aalis ng Event Listeners

Maaari mong tanggalin ang event listeners gamit ang removeEventListener. Para dito, kailangang ipasa mo ang parehong event handler na idinagdag sa umpisa.

 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}

Idinagdag ng code na ito ang event listener para sa click sa button, at pagkatapos ay inaalis ito sa pamamagitan ng pagtukoy ng parehong handler.

Paglikha ng Custom Events

Sa TypeScript, bukod sa mga standard na event, maaari ka ring lumikha at mag-trigger ng custom events. Gamitin ang class na CustomEvent para gumawa ng custom event at i-trigger ito gamit ang dispatchEvent na method.

 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}

Lumilikha ang code na ito ng isang custom na kaganapan gamit ang CustomEvent, ipinapadala ito sa elemento, at ipinapakita ang mga detalye nito sa console.

Pag-kontrol sa Pagkakalat ng Event (Event Propagation)

Kapag nangyari ang event, default itong mag-'bubble' (kumakalat sa mga parent elements). Upang maiwasan ito, gamitin ang event.stopPropagation(). Maaari mo ring gamitin ang preventDefault() upang pigilan ang normal na behavior ng 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}

Hindi pinapagana ng code na ito ang default na aksyon kapag na-click ang button, pinipigilan ang event bubbling, at nagsasagawa ng custom na pagproseso.

Buod

Ang pag-handle ng event sa TypeScript ay halos kapareho sa JavaScript, ngunit dahil sa tamang type definitions, mas ligtas at mas mapagkakatiwalaan mong ma-handle ang event objects at mga elemento ng DOM. Sa pamamagitan ng pagdagdag at pagtanggal ng event listeners, paglalagay ng event types, at paggamit ng type assertions, makakamit mo ang mas malinaw at hindi madaling magkamaling pag-handle ng events.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Shadow DOM sa TypeScript Fetch/XMLHttpRequest sa TypeScript