ฉันต้องการเพิ่มข้อสังเกตและการโต้เถียงเพื่อคำตอบของ jfriend00 (ส่วนใหญ่เป็นเพียงความคิดเห็นของฉันตามความรู้สึกของฉัน)
ไม่ - คุณไม่ควรผูกตัวจัดการเหตุการณ์ที่ได้รับมอบหมายทั้งหมดเข้ากับวัตถุเอกสาร นั่นอาจเป็นสถานการณ์ที่เลวร้ายที่สุดที่คุณสามารถสร้างได้
ก่อนอื่นการมอบหมายกิจกรรมไม่ได้ทำให้โค้ดของคุณเร็วขึ้น ในบางกรณีมันมีประโยชน์และในบางกรณีไม่ คุณควรใช้การมอบหมายเหตุการณ์เมื่อคุณต้องการการมอบหมายกิจกรรมจริง ๆ และเมื่อคุณได้รับประโยชน์จากมัน มิฉะนั้นคุณควรผูกตัวจัดการเหตุการณ์โดยตรงกับวัตถุที่เหตุการณ์เกิดขึ้นเพราะโดยทั่วไปจะมีประสิทธิภาพมากกว่า
ในขณะที่มันเป็นความจริงที่ประสิทธิภาพการทำงานอาจจะดีขึ้นเล็กน้อยถ้าคุณเพียงแค่ลงทะเบียนและจัดกิจกรรมสำหรับองค์ประกอบเดียว แต่ฉันเชื่อว่ามันไม่ได้หนักหน่วงต่อข้อดีด้านความสามารถในการปรับขนาดที่ตัวแทนมอบให้ ฉันยังเชื่อว่าเบราว์เซอร์จะจัดการกับสิ่งนี้ได้อย่างมีประสิทธิภาพมากขึ้นถึงแม้ว่าฉันจะไม่มีข้อพิสูจน์เรื่องนี้ ในความคิดของฉันการมอบหมายงานอีเวนต์เป็นวิธีที่จะไป!
อย่างที่สองคุณไม่ควรผูกเหตุการณ์ที่มอบหมายทั้งหมดในระดับเอกสาร นี่คือสาเหตุที่. live () เลิกใช้เนื่องจากไม่มีประสิทธิภาพมากเมื่อคุณมีเหตุการณ์จำนวนมากผูกไว้ด้วยวิธีนี้ สำหรับการจัดการเหตุการณ์ที่มอบหมายมันมีประสิทธิภาพมากขึ้นในการผูกเข้ากับพาเรนต์ที่ใกล้เคียงที่สุดซึ่งไม่ใช่ไดนามิก
ฉันเห็นด้วยกับเรื่องนี้ หากคุณแน่ใจ 100% ว่าเหตุการณ์จะเกิดขึ้นภายในคอนเทนเนอร์มันจะผูกมัดเหตุการณ์ไว้ในคอนเทนเนอร์นี้ แต่ฉันจะยังคงโต้แย้งกับการเชื่อมโยงเหตุการณ์กับองค์ประกอบทริกเกอร์โดยตรง
เหตุการณ์ที่สามไม่ใช่เหตุการณ์ทั้งหมดที่ทำงานหรือปัญหาทั้งหมดสามารถแก้ไขได้ด้วยการมอบสิทธิ์ ตัวอย่างเช่นหากคุณต้องการดักจับเหตุการณ์สำคัญในการควบคุมการป้อนข้อมูลและการปิดกั้นคีย์ที่ไม่ถูกต้องจากการเข้าสู่การควบคุมการป้อนข้อมูลคุณไม่สามารถทำเช่นนั้นกับการจัดการเหตุการณ์ที่ได้รับมอบหมายเพราะตามเวลาที่เหตุการณ์ฟองสบู่ ได้รับการประมวลผลโดยอินพุตควบคุมและมันก็สายเกินไปที่จะมีอิทธิพลต่อพฤติกรรมนั้น
นี้เป็นเพียงไม่เป็นความจริง. โปรดดูรหัสนี้เพ็ญ: https://codepen.io/pwkip/pen/jObGmjq
document.addEventListener('keypress', (e) => {
e.preventDefault();
});
มันแสดงให้เห็นว่าคุณสามารถป้องกันผู้ใช้จากการพิมพ์โดยการลงทะเบียนเหตุการณ์ keypress ในเอกสาร
นี่คือบางครั้งเมื่อจำเป็นต้องมีการมอบหมายเหตุการณ์หรือเป็นประโยชน์:
เมื่อวัตถุที่คุณกำลังจับภาพเหตุการณ์ถูกสร้าง / ลบแบบไดนามิกและคุณยังคงต้องการที่จะจับภาพเหตุการณ์โดยไม่ต้องทำการเชื่อมโยงตัวจัดการเหตุการณ์ใหม่ทุกครั้งที่คุณสร้างขึ้นใหม่ เมื่อคุณมีวัตถุจำนวนมากที่ทุกคนต้องการตัวจัดการเหตุการณ์เดียวกันที่แน่นอน (ที่ล็อตมีอย่างน้อยหลายร้อย) ในกรณีนี้มันอาจมีประสิทธิภาพมากขึ้นในเวลาติดตั้งเพื่อผูกตัวจัดการเหตุการณ์ที่มอบหมายหนึ่งตัวแทนที่จะเป็นตัวจัดการเหตุการณ์โดยตรงหลายร้อยตัวขึ้นไป หมายเหตุการจัดการเหตุการณ์ที่มอบหมายจะมีประสิทธิภาพน้อยกว่าในขณะดำเนินการมากกว่าตัวจัดการเหตุการณ์โดยตรง
ฉันต้องการตอบด้วยข้อความนี้จากhttps://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c
Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let’s say that we have an HTML unordered list we want to bind event handlers to. Instead of binding a click event handler for each list item (which may be hundreds for all we know), we bind one click handler to the parent unordered list itself.
นอกจากนี้ googling สำหรับperformance cost of event delegation googleส่งคืนผลลัพธ์มากขึ้นในความโปรดปรานของการมอบหมายเหตุการณ์
เมื่อคุณพยายามที่จะจับภาพ (ในระดับที่สูงขึ้นในเอกสารของคุณ) เหตุการณ์ที่เกิดขึ้นกับองค์ประกอบใด ๆ ในเอกสาร เมื่อการออกแบบของคุณมีการใช้เหตุการณ์ bubbling และ stopPropagation () อย่างชัดเจนเพื่อแก้ไขปัญหาหรือคุณสมบัติในหน้าของคุณ เพื่อทำความเข้าใจนี้อีกเล็กน้อยหนึ่งต้องเข้าใจว่า jQuery มอบหมายเหตุการณ์จัดการ เมื่อคุณเรียกสิ่งนี้:
$ ("# myParent"). on ('คลิก', 'button.actionButton', myFn); มันจะติดตั้งตัวจัดการเหตุการณ์ jQuery ทั่วไปบนวัตถุ #myParent เมื่อเหตุการณ์คลิกมีฟองอากาศมากถึงตัวจัดการเหตุการณ์ที่ได้รับมอบหมายนี้ jQuery จะต้องผ่านรายการตัวจัดการเหตุการณ์ที่ได้รับมอบหมายที่แนบมากับวัตถุนี้และดูว่าองค์ประกอบต้นทางสำหรับเหตุการณ์ตรงกับตัวเลือกใด ๆ ในตัวจัดการเหตุการณ์ที่ได้รับมอบหมาย
เนื่องจากตัวเลือกสามารถมีส่วนร่วมได้พอสมควรหมายความว่า jQuery ต้องแยกวิเคราะห์ตัวเลือกแต่ละตัวแล้วเปรียบเทียบกับลักษณะของเป้าหมายเหตุการณ์ดั้งเดิมเพื่อดูว่าตรงกับตัวเลือกแต่ละตัวหรือไม่ นี่ไม่ใช่การดำเนินการที่ถูก ไม่ใช่เรื่องใหญ่หากมีเพียงหนึ่งในนั้น แต่ถ้าคุณวางตัวเลือกทั้งหมดลงบนวัตถุเอกสารและมีตัวเลือกหลายร้อยตัวเปรียบเทียบกับทุกเหตุการณ์ที่เกิดขึ้นจริงนี่จะเริ่มประสิทธิภาพการจัดการเหตุการณ์ที่เกิดขึ้นอย่างรวดเร็ว
ด้วยเหตุผลนี้คุณต้องการตั้งค่าตัวจัดการเหตุการณ์ที่ได้รับมอบหมายของคุณเพื่อให้ตัวจัดการเหตุการณ์ที่ได้รับมอบหมายอยู่ใกล้กับวัตถุเป้าหมายมากที่สุด ซึ่งหมายความว่าเหตุการณ์ที่น้อยลงจะเกิดฟองอากาศผ่านตัวจัดการเหตุการณ์ที่ได้รับมอบหมายแต่ละครั้งซึ่งจะเป็นการปรับปรุงประสิทธิภาพ การวางเหตุการณ์ที่มอบหมายทั้งหมดบนวัตถุเอกสารนั้นเป็นประสิทธิภาพที่แย่ที่สุดเนื่องจากเหตุการณ์ที่เกิดขึ้นจะต้องผ่านตัวจัดการเหตุการณ์ที่ได้รับมอบหมายทั้งหมดและได้รับการประเมินกับตัวเลือกเหตุการณ์ที่ได้รับมอบหมายทั้งหมด นี่คือสาเหตุที่. live () เลิกใช้เพราะนี่คือสิ่งที่. live () ทำและพิสูจน์ว่าไม่มีประสิทธิภาพมาก
เอกสารนี้อยู่ที่ไหน หากเป็นเรื่องจริง jQuery ดูเหมือนจะจัดการกับการมอบหมายในวิธีที่ไม่มีประสิทธิภาพมากและจากนั้นข้อโต้แย้งของฉันควรจะใช้กับวานิลลา JS เท่านั้น
ยัง: ฉันต้องการหาแหล่งที่เป็นทางการที่สนับสนุนการเรียกร้องนี้
:: แก้ไข ::
ดูเหมือนว่า jQuery กำลังทำเหตุการณ์เดือดปุด ๆ อย่างไม่มีประสิทธิภาพ (เพราะรองรับ IE8)
https://api.jquery.com/on/#event-performance
ดังนั้นข้อโต้แย้งของฉันที่นี่ส่วนใหญ่ถือเป็นจริงสำหรับวานิลลา JS และเบราว์เซอร์ที่ทันสมัย