โอ่ย เป็นเรื่องที่เขียนยากพอควรเลยเรื่องนี้ เอาเป็นว่าสรุปแบบที่ผมเข้าใจเก็บไว้ก่อนละกัน ใน Flex เวลาทำงานกับ UIComponent ต่างๆ สิ่งหนึ่งที่คิดว่าต้องเจอกันอย่างแน่นอนและต้องใช้ด้วยคือ Event ซึ่งมันมีมาให้อัตโนมัติกับ UIComponent ทุกตัว โดยถ้าเทียบกับภาษาอื่นก็อย่างจาวา ก็ให้นึกถึงพวก listener ทั้งหลายได้เลย คล้ายๆ กัน
Event ของ Flex อาจต่างจากภาษาอื่นตรงที่มันมีลำดับขั้นในการทำงาน แทนที่จะมีการส่งขึ้นไปแล้วเรียกฟังก์ชั่นโดยตรง คือ
- Capturing
- Targeting
- Bubbling
ขั้นแรก Capturing เป็นขั้นที่ Flex จะไล่หาว่า Component ไหนจะเป็นตัวรับ Event เพื่อเอามาทำงานโดยไล่จาก Component ที่อยู่บนสุดลงมาถึง Component ปัจจุบัน โดยขณะที่ไล่ลงมาก็จะมีการเปลี่ยนตัวแปร currentTarget เป็น Component ปัจจุบันที่เรียกอยู่ ปกติแล้วขั้นนี้ไม่ค่อยได้ใช้ จะใช้ขั้น Bubbling กันซะมากกว่า แต่ถ้าหากต้องการจะใช้จริงๆ สามารถกำหนดตอนใส่ Listener ได้โดยให้ argument สุดท้ายเป็น true
component.addEventListener(Event.EVENT_TYPE, eventHandler, true);
บอกตามตรงคือ ผมก็ไม่เคยใช้ Capturing เลยส่วนใหญ่จะใช้ Bubbling มากกว่า ไปดูขั้นถัดไปดีกว่า
ถัดมาคือ Targeting เป็นช่วงที่มีการเรียกฟังก์ชั่นที่กำหนดไว้ขึ้นมาทำงาน โดยขั้นนี้ currentTarget และ target จะมีค่าเหมือนกัน
ขั้นสุดท้ายที่ใช้เยอะที่สุดคือ Bubbling คือไล่ตรวจสอบจาก Component ปัจจุบันขึ้นไปจนถึงชั้นบนสุดว่ามี Component ไหนกำหนดให้เรียกฟังก์ชั่นเมื่อมี Event นี้เกิดขึ้นหรือไม่ โดยขั้นตอนการทำงานก็คล้ายๆ กับ Capturing แต่กลับด้านกัน ที่ใช้ขั้นนี้เยอะเพราะว่า มันมองง่ายกว่าเท่านั้นเอง เช่นตอนคลิกที่ ปุ่ม เวลาที่เราคิด Event มันก็ควรออกจากปุ่มค่อยๆ ขึ้นไปทีละชั้นๆ ถูกมะ ไม่ไช่ ต้องไล่จาก ชั้นบนสุดลงมา
โอ่ย เขียนมาซะยาว อาจจะงงเองได้ สรุปง่ายๆ ดีกว่าคือ Event ใน Flex มันสามารถลอยได้ ไปยัง Component ที่เป็นพ่อแม่มันอีกที เพื่อให้ Component นั้นรู้ว่าควรจะทำไรต่อเมื่อมี Event เกิดกับลูกของมัน
สำหรับรายละเอียดลึกๆ ลองอ่านที่หน้านี้ดู : Event propagation น่าจะเข้าใจง่ายกว่านะ ^^!
