การศึกษาเบื้องต้นเกี่ยวกับพร็อกซีเหตุการณ์ในจาวาสคริปต์

เหตุการณ์เป็นหนึ่งในวัตถุที่ทรงพลังที่สุดใน 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 นั้นซับซ้อนกว่ามาก