การจัดการเหตุการณ์ (Event) ใน TypeScript

บทความนี้อธิบายเรื่องการจัดการเหตุการณ์ใน TypeScript

คุณสามารถเรียนรู้เกี่ยวกับวิธีการจัดการเหตุการณ์และเหตุการณ์ที่กำหนดเองผ่านตัวอย่างโค้ด

YouTube Video

การจัดการเหตุการณ์ (Event) ใน TypeScript

การจัดการเหตุการณ์ใน TypeScript ทำงานเหมือนกับใน JavaScript แต่ TypeScript จะช่วยเพิ่มความปลอดภัยของชนิดข้อมูล ทำให้คุณสามารถจัดการ event ได้อย่างปลอดภัยยิ่งขึ้นโดยใช้ชนิด event ที่เหมาะสม พื้นฐานของการจัดการ event คือการเพิ่ม event listener ให้กับองค์ประกอบ DOM และดำเนินการเมื่อผู้ใช้โต้ตอบ

การเพิ่ม Event Listener

Event listener ถูกเพิ่มให้กับองค์ประกอบ DOM โดยใช้เมธอด addEventListener ตัวอย่างเช่น หากต้องการจัดการเหตุการณ์คลิก คุณสามารถทำได้ดังนี้:

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

• ในโค้ดนี้ใช้ addEventListener เพื่อลงทะเบียนตัวจัดการสำหรับเหตุการณ์คลิกบนองค์ประกอบ DOM ที่ระบุ

ชนิดของเหตุการณ์ (Event Types) ใน TypeScript

ใน TypeScript วัตถุ event ที่ได้รับใน event listener จะถูกกำหนดชนิดข้อมูลที่เหมาะสมโดยอัตโนมัติ วัตถุ event จะมีคุณสมบัติแตกต่างกันตามชนิดของ 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}

• โค้ดนี้ตรวจจับเหตุการณ์ส่งฟอร์ม (submit) ของแบบฟอร์ม แล้วยับยั้งการดำเนินการส่งแบบเดิมและแสดงข้อความในคอนโซนแทน

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}

• โค้ดนี้จะแสดง "Focused" ในคอนโซนเมื่อช่องกรอกข้อมูลได้รับความสนใจ และ "Blurred" เมื่อสูญเสียความสนใจ

การจัดการเหตุการณ์แบบกำหนดเองด้วยการกำหนดชนิดข้อมูล

สำหรับ event แบบกำหนดเอง หรือเมื่อ TypeScript ไม่สามารถอนุมานชนิดข้อมูลได้ คุณสามารถระบุชนิดข้อมูลโดยตรงด้วย type assertion

ตัวอย่างเช่น หากต้องการจัดการ event สำหรับช่องกรอกข้อมูล (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}

• โค้ดนี้ใช้การคาดการณ์ชนิด (type assertion) เพื่อให้การระบุเป้าหมายเหตุการณ์เป็น HTMLInputElement แล้วแสดงค่าของมันในคอนโซน

การลบ Event Listener

คุณสามารถลบ event listener โดยใช้ removeEventListener ในการดำเนินการนี้ คุณต้องส่ง event handler เดียวกันกับที่ใช้ตอนเพิ่มในครั้งแรก

 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}

• โค้ดนี้เพิ่มตัวจับเหตุการณ์คลิกให้กับปุ่ม แล้วลบออกโดยระบุผู้จัดการเหตุการณ์เดียวกัน

การสร้าง Event แบบกำหนดเอง

ใน TypeScript นอกจาก event มาตรฐานแล้ว คุณยังสามารถสร้างและเรียกใช้ event เฉพาะของคุณเองได้ ใช้คลาส CustomEvent เพื่อสร้าง event แบบกำหนดเองและเรียกใช้ด้วยเมธอด 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 ส่งไปยังองค์ประกอบ และแสดงรายละเอียดในคอนโซน

การควบคุมการส่งต่อเหตุการณ์ (Event Propagation)

เมื่อเกิด event ขึ้น โดยปกติ event จะถูกส่งต่อ (bubble) ไปยังองค์ประกอบแม่ หากต้องการหยุดพฤติกรรมนี้ ให้ใช้ 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 แต่การกำหนดชนิดข้อมูลที่ถูกต้องจะช่วยให้คุณจัดการ event และองค์ประกอบ DOM ได้อย่างปลอดภัยและแม่นยำ การเพิ่มและลบ event listener การกำหนดชนิด event และการใช้ type assertion จะช่วยให้การจัดการเหตุการณ์ของคุณชัดเจนและลดข้อผิดพลาด

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video