เหตุการณ์เป็นหนึ่งในวัตถุที่ทรงพลังที่สุดใน JavaScript มาโดยตลอด JavaScript มีสองวิธีคือ addEventListener และ AttachEvent เพื่อผูกเหตุการณ์กับโหนด DOM jquery จะห่อหุ้มเพิ่มเติมและให้วิธีการผูกที่เข้ากันได้กับเบราว์เซอร์ต่างๆ ขณะนี้ วิธีการผูกเหตุการณ์แบบดั้งเดิมนี้มีข้อบกพร่องดังต่อไปนี้:
1. คุณอาจต้องผูก EventHanders จำนวนมาก
หากมี 100 แถวในตารางบนเพจ เหตุการณ์การคลิกจะต้องเชื่อมโยงกับแต่ละแถว จากนั้น 100 EventHandlers จะต้องถูกผูกไว้ ซึ่งสร้างภาระอย่างมากให้กับประสิทธิภาพของเพจ เนื่องจากจำเป็นต้องสร้างหน่วยความจำเพิ่มเติมเพื่อจัดเก็บตัวจัดการเหล่านี้
2. ไม่สามารถเพิ่มเหตุการณ์ได้หลังจากเชื่อมโยงกับโหนด DOM
หากรหัสในหน้าเป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">ทดสอบ</div>')
div ที่เพิ่มในภายหลังไม่สามารถทริกเกอร์เหตุการณ์การคลิกได้
เพื่อที่จะแก้ไขปัญหาทั้งสองนี้ JavaScript ได้แนะนำพร็อกซีเหตุการณ์ (พร็อกซีเหตุการณ์) ก่อนอื่น มาทำความเข้าใจกลไกการเดือดปุดๆ ใน js กันก่อน
โดยพื้นฐานแล้วเบราว์เซอร์ทั้งหมดรองรับเหตุการณ์ที่เกิดขึ้น เมื่อเหตุการณ์ถูกทริกเกอร์บนโหนด DOM เหตุการณ์จะถูกเผยแพร่ไปจนถึงโหนดรูทของเอกสาร เนื่องจากเหตุการณ์โหนดทั้งหมดจะถูกส่งไปยังโหนดรูทของเอกสารในที่สุด ถ้าเราเชื่อมโยงเหตุการณ์โดยตรงกับโหนดรูทของเอกสาร (โหนดเอกสาร) จากนั้นใช้ event.target เพื่อกำหนดว่าโหนดใดที่ทริกเกอร์เหตุการณ์ จะช่วยลดจำนวนเหตุการณ์ได้มากหรือไม่ EventHandlers แล้วการผูกล่ะ?
วิธีการถ่ายทอดสดใน jquery ถูกนำมาใช้อย่างเป็นทางการตามหลักการนี้ เรามาปรับใช้ live เวอร์ชันง่าย ๆ กัน:
คัดลอกรหัสรหัสดังต่อไปนี้:
$.fn.mylive=function(eventType,fn){
var that=this.selector;
$(document).bind(eventType,function(event){
var match=$(event.target).closest(นั่น)
ถ้า (match.length !== 0){
fn.apply($(event.target),[กิจกรรม]);
-
-
-
$("#tb td").mylive('คลิก',ฟังก์ชั่น(เหตุการณ์){
การแจ้งเตือน (event.target.innerHTML);
-
var tb='<table id="tb"> /
<tr> /
<td>คอลัมน์แรก</td>/
<td>คอลัมน์ที่สอง</td>/
<td>คอลัมน์ที่สาม</td>/
</tr>/
</ตาราง>';
$("body").ผนวก(tb);
ในเมธอด live เหตุการณ์จะถูกผูกไว้กับโหนดเอกสาร และ $(event.target).closest(that) ตรงกับองค์ประกอบที่ทริกเกอร์เหตุการณ์จริง ในการสาธิต เราได้รวมเหตุการณ์การคลิกสำหรับยานพิฆาตรถถังแต่ละตัวที่เพิ่มเข้ามาในภายหลัง เมื่อเราคลิกที่ยานพิฆาตรถถังที่แตกต่างกัน เราพบว่ากล่องข้อความที่เกี่ยวข้องจะปรากฏขึ้น
วิธีการถ่ายทอดสดชดเชยข้อบกพร่องสองประการของวิธีการผูกเหตุการณ์แบบดั้งเดิมที่กล่าวถึงก่อนหน้านี้ แต่วิธีการถ่ายทอดสดยังคงมีข้อบกพร่องอยู่ ดูรหัสนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
$("#tb td").mylive('คลิก',ฟังก์ชั่น(เหตุการณ์){
การแจ้งเตือน (event.target.innerHTML);
-
อันดับแรกจะสำรวจเอกสารทั้งหมดตามตัวเลือก jquery ค้นหาองค์ประกอบ #tb td ทั้งหมด และจัดเก็บเป็นวัตถุ อย่างไรก็ตาม ในวิธีการใช้งานแบบสด ออบเจ็กต์เหล่านี้จะไม่ได้ใช้ แต่จะใช้เฉพาะ "#td td" เป็นสตริงเพื่อให้ตรงกับแหล่งที่มาของเหตุการณ์ สิ่งนี้จะเพิ่มการบริโภคที่ไม่จำเป็นอย่างมาก
มีวิธีใดบ้างที่จะปรับปรุงสถานการณ์นี้? วิธีการมอบสิทธิ์พร็อกซีมีให้ใน jQuery ซึ่งรองรับกิจกรรมการเชื่อมโยงกับองค์ประกอบที่ระบุ ไม่ใช่แค่เอกสาร ทำความเข้าใจหลักการของมัน ลองใช้ผู้รับมอบสิทธิ์เวอร์ชันง่ายๆ:
คัดลอกรหัสรหัสดังต่อไปนี้:
$(body).append('<div id="dv"></div>');
$.fn.mydelegate=function(ตัวเลือก,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest(ตัวเลือก);
ถ้า (match.length !== 0){
fn.apply($(event.target),[กิจกรรม]);
-
-
-
$("#dv").mydelegate('td','click',function(event){
การแจ้งเตือน (event.target.innerHTML);
-
var tb='<table id="tb"> /
<tr> /
<td>คอลัมน์แรก</td>/
<td>คอลัมน์ที่สอง</td>/
<td>คอลัมน์ที่สาม</td>/
</tr>/
</ตาราง>';
$("dv").ผนวก(tb);
เมธอด mydeletage ไม่จำเป็นต้องได้รับอ็อบเจ็กต์ td ทั้งหมด แต่เฉพาะอ็อบเจ็กต์ div ที่ถูกผูกไว้กับเหตุการณ์เท่านั้น ซึ่งดีกว่าวิธีการแบบสดในแง่ของประสิทธิภาพในการดำเนินการ
นี่เป็นเพียงการแนะนำเพื่อให้ทุกคนเข้าใจหลักการของพร็อกซีเหตุการณ์ การใช้งาน live และ dedegate ใน jquery นั้นซับซ้อนกว่ามาก