สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
# การทำ Event Delegation ใน JavaScript DOM
ในยุคของการพัฒนาเว็บไซต์ที่ซับซ้อน การจัดการกับเหตุการณ์หรือ Event ต่างๆ นั้นกลายเป็นสิ่งที่ขาดไม่ได้ JavaScript DOM เป็นหนึ่งในเครื่องมือที่มีความสามารถในการจัดการกับเหตุการณ์ได้อย่างมีประสิทธิภาพ หนึ่งในเทคนิคที่ผู้นักพัฒนาเว็บควรทราบคือ Event Delegation ซึ่งช่วยให้การจัดการเหตุการณ์มีประสิทธิภาพมากขึ้น
เมื่อเราทำงานกับ DOM บนหน้าเว็บซึ่งมีองค์ประกอบมากมาย เช่น การคลิกเมาส์บนปุ่มหรือการส่งฟอร์ม เราอาจเผชิญกับประสิทธิภาพที่ลดลง เนื่องจากต้องลงทะเบียน event listener ไปยังองค์ประกอบแต่ละตัว แม้วิธีนี้จะทำให้เราได้ผลลัพธ์ตามที่ต้องการ แต่ก็อาจทำให้หน้าเว็บมีการทำงานที่ช้าลงเมื่อมีการเรียกใช้เหตุการณ์จำนวนมาก
Event Delegation เป็นเทคนิคที่ใช้ประโยชน์จากปัจจุบันของ DOM เพื่อลดจำนวน event listener ที่จำเป็น โดยเฉพาะการใช้ประโยชน์จาก Event Bubbling ที่เหตุการณ์จากลูกจะวิ่งขึ้นไปยังพ่อแม่ในลำดับชั้นของ DOM
การทำ Event Delegation
แทนที่เราจะลงทะเบียน event listener บนองค์ประกอบแต่ละตัว เราลงทะเบียนบนองค์ประกอบใหญ่เช่นพ่อแม่ของมันแทน และเมื่อเหตุการณ์ถูกกระตุ้น เราจะใช้การตรวจสอบเป้าหมาย (target) ของเหตุการณ์เพื่อตรวจสอบว่าองค์ประกอบใดเป็นต้นเหตุของเหตุการณ์
ลองพิจารณาตัวอย่างต่อไปนี้:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ในตัวอย่างด้านบน เมื่อเราต้องการตรวจจับทุกครั้งที่มีการคลิกที่ `li` ใดๆ ในรายการ `ul` เราสามารถเขียนโค้ด JavaScript ดังต่อไปนี้ด้วยการใช้ Event Delegation:
document.getElementById('list').addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
console.log('List item ', e.target.textContent, ' was clicked!');
}
});
ในโค้ดนี้ เราลงทะเบียน event listener ที่ `ul` โดยตรง แทนการลงทะเบียนที่ `li` แต่ละตัว จากนั้นใช้ `e.target` เพื่อตรวจสอบว่าองค์ประกอบที่ถูกคลิกเป็น `li` หรือไม่
การใช้ Event Delegation เป็นเทคนิคที่มีประโยชน์มากสำหรับการจัดการเหตุการณ์ใน DOM ที่ซับซ้อน นอกจากจะช่วยลดจำนวน event listener แล้ว ยังทำให้การจัดการกับองค์ประกอบที่เปลี่ยนแปลงมีประสิทธิภาพมากขึ้น หากคุณสนใจในการเรียนรู้การพัฒนาเว็บเพิ่มเติม อย่าลืมพิจารณาเรียนที่ Expert-Programming-Tutor (EPT) ซึ่งมีคอร์สที่ครอบคลุมและเน้นทั้งทฤษฎีและปฏิบัติจริง
การเข้าใจเทคนิคเช่น Event Delegation ไม่เพียงแต่ช่วยให้คุณเป็นนักพัฒนาที่มีประสิทธิภาพขึ้น แต่ยังเปิดโอกาสให้นำความรู้ไปประยุกต์ใช้แก้ปัญหาในสถานการณ์ที่หลากหลายอีกด้วย
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com