טיפול באירועים ב-TypeScript

מאמר זה מסביר טיפול באירועים ב-TypeScript.

ניתן ללמוד על שיטות לטיפול באירועים ואירועים מותאמים אישית באמצעות דוגמאות קוד.

YouTube Video

טיפול באירועים ב-TypeScript

טיפול באירועים ב-TypeScript מתבצע בדומה ל-JavaScript, אך TypeScript מוסיף בטיחות טיפוסים ומאפשר לעבוד עם אירועים בצורה בטוחה יותר על ידי שימוש נכון בטיפוסי אירועים. הבסיס של טיפול באירועים הוא הוספת מאזיני אירועים לאלמנטים ב-DOM וביצוע פעולות בתגובה לאינטראקציות המשתמש.

הוספת מאזיני אירועים

מאזיני אירועים נוספים לאלמנטים דרך השיטה addEventListener. לדוגמה, כדי לטפל באירוע לחיצה, תעשו כך:.

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

• בקוד זה נעשה שימוש ב־addEventListener כדי לרשום מטפל עבור אירוע הלחיצה על אלמנט ה-DOM שצוין.

טיפוסי אירועים ב-TypeScript

ב-TypeScript, אובייקט ה-event שמתקבל במאזין האירוע מקבל אוטומטית את הטיפוס המתאים. לאובייקט ה-event יש מאפיינים משתנים בהתאם לסוג האירוע, אך הטיפוס הבסיסי שלו הוא Event.

בשימוש בטיפוס הנכון לכל אירוע, ניתן ליהנות מהבטיחות של TypeScript בפיתוח.

סוגי אירועים עיקריים

1. Event Event הוא סוג הבסיס עבור אירועים נפוצים. משמש לדברים כמו שליחת טופס או סיום טעינת העמוד.

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}

• קוד זה מזהה את אירוע השליחה של הטופס, מונע את פעולת השליחה ברירת המחדל, ומדפיס הודעה למסוף במקום.

2. MouseEvent

   MouseEvent הוא סוג אירוע הקשור לפעולות עכבר כגון לחיצות או תנועת עכבר. ניתן לקבל מידע על מיקום העכבר ואיזה כפתור נלחץ.

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}

• קוד זה מקבל את קואורדינטות העכבר כאשר לוחצים על הכפתור ומציג אותן במסוף.

3. KeyboardEvent KeyboardEvent הוא סוג אירוע הקשור לקלט מהמקלדת. ניתן לגשת למקשים שנלחצו ולמצב המקשים המיוחדים (Shift, Alt, Ctrl ועוד).

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

• קוד זה מציג את שם המקש שנלחץ, ואם מקש Ctrl מוחזק, מדפיס גם את המידע הזה למסוף.

4. InputEvent InputEvent הוא סוג אירוע הקשור לשינויים בשדות קלט. משמש כאשר ערך של שדה טקסט או 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}

• קוד זה מציג את התוכן של שדה הקלט במסוף בכל פעם שערכו משתנה.

5. FocusEvent FocusEvent הוא סוג אירוע שמתרחש כאשר אלמנט מקבל או מאבד פוקוס.

 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}

• קוד זה מציג "נבחר" במסוף כאשר שדה הקלט בפוקוס ו"לא נבחר" כאשר הוא מאבד פוקוס.

טיפול באירועים מותאמים אישית עם הצהרת טיפוס (Type Assertion)

לאירועים מותאמים אישית או כאשר הסקת הטיפוס של TypeScript אינה פועלת, ניתן להצהיר מפורשות על הטיפוס בעזרת type assertion.

לדוגמה, לטיפול באירוע של שדה קלט מסוים (HTMLInputElement), יש לציין את הטיפוס כך:.

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}

• קוד זה משתמש באימות טיפוס כדי לטפל ביעד האירוע כ-HTMLInputElement ומציג את ערכו במסוף.

הסרת מאזיני אירועים

ניתן להסיר מאזיני אירועים באמצעות removeEventListener. על מנת לעשות זאת, יש להעביר את אותה פונקציית מטפל אירוע שהתווספה במקור.

 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}

• קוד זה מוסיף מאזין לאירוע לחיצה לכפתור ולאחר מכן מסיר אותו על ידי ציון אותה פונקציית מטפל.

יצירת אירועים מותאמים אישית

ב-TypeScript, בנוסף לאירועים רגילים, ניתן גם ליצור ולשגר אירועים מותאמים אישית. יש להשתמש במחלקה CustomEvent כדי ליצור אירוע משלכם ולשגר אותו בעזרת 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}

• קוד זה יוצר אירוע מותאם אישית באמצעות CustomEvent, שולח אותו לאלמנט ומציג את פרטיו במסוף.

שליטה בהפצת אירועים

כאשר אירוע מתרחש, ברירת המחדל היא שהוא מתפשט (bubbles) לאלמנטים האב. כדי למנוע זאת, השתמשו ב-event.stopPropagation(). ניתן גם להשתמש ב-preventDefault() כדי למנוע את פעולת ברירת המחדל של הדפדפן.

 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}

• קוד זה מבטל את הפעולה ברירת המחדל בלחיצה על הכפתור, עוצר את התפשטות האירוע ומבצע עיבוד מותאם אישית.

סיכום

טיפול באירועים ב-TypeScript דומה מאוד ל-JavaScript, אך עם הגדרת טיפוסים מתאימה אפשר לעבוד עם עצמים של אירועים ואלמנטים ב-DOM בצורה בטוחה ואמינה. על ידי הוספה והסרה של מאזיני אירועים, שימוש בטיפוסי אירועים ושימוש בהצהרות טיפוס, ניתן להגיע לטיפול באירועים ברור ונטול שגיאות.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video