Event delegation หมายถึงการแนบ listener หนึ่ง ตัวไปยังบรรพบุรุษร่วมแทนที่จะแนบ listener หนึ่งตัวต่อลูก และใช้ event bubbling เพื่อระบุว่าลูกใดที่มีปฏิสัมพันธ์จริงๆ (via event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
เมื่อคุณคลิก <li> เหตุการณ์จะ bubbles ขึ้น: li → ul → body → document. Listener บน <ul> ดังนั้นจึงรับการคลิกจากลูก <li> ใดๆ และ e.target บอกให้คุณทราบว่าองค์ประกอบใดได้รับการคลิก closest("li") เดินขึ้นจากเป้าหมายเพื่อค้นหาองค์ประกอบที่ต้องการ (ยังจัดการการคลิกบนองค์ประกอบภายในด้วย).
<li> ใหม่ที่เพิ่มในภายหลังไม่ต้องการ listener ใหม่ เพราะบรรพบุรุษได้จัดการกับมันแล้ว.มันพึ่งพา bubbling ดังนั้นจึงไม่ทำงานกับเหตุการณ์ที่ ไม่ bubble (focus, blur — ใช้ focusin/focusout แทน). นี่คือเทคนิคที่ React ใช้โดยภายใน (listener ราก หนึ่งตัวสำหรับแอปทั้งหมด).