رویدادهای delegate در جی‌کوئری

رویدادها یا eventهای delegate رویدادهایی هستند که به عنصرهای اصلی متصل نمی‌شوند. برای مثال چنانچه یک جدول با ۱۰۰ ردیف و ۱۰ ستون داشته باشیم، و بخواهیم زمان کلیک شدن روی یک سلول از این موضوع با خبر شویم، با پیوست کردن رویداد click به عنصر table می‌توانیم از وقوع کلیک روی هر سلول باخبر شویم.

علت عملکرد رویدادهای delegate این است که اغلب مرورگرها، رویدادها را به صورت درختی منتشر می‌کنند. یعنی در هنگام کلیک روی یک عنصر td، عنصرهای tr، tbody، table و body به ترتیب از این رویداد مطلع خواهند شد.

دو سناریو برای استفاده از رویدادهای delegate به جای پیوست کردن رویدادها به تک‌تک عنصرها وجود دارد.

سناریوی نخست، زمانی است که عنصرهای داخلی، در زمان اجرا ایجاد شوند و در شروع کار وجود نداشته باشند.
در این حالت، بدون نگرانی از کاهش کارایی و خطاهای احتمالی، می‌توانیم از رویدادهای delegate استفاده کنیم.

سناریوی دوم زمانی است که تعداد عنصرهای هدف بسیار زیاد باشند و استفاده از رویدادهای delegate در این شرایط برای افزایش کارایی صورت می‌پذیرد. یک رویداد delegate در مقایسه با صدها و هزاران رویداد عادی می‌تواند اثر بزرگی در کارکرد نرم‌افزار ما به ویژه در مرورگرهای محدود مانند مرورگرهای موبایل به همراه داشته باشد.

استفاده از رویدادهای delegate در نگارش‌های مختلف jQuery به شیوه‌های مختلفی انجام می‌شود. قدیمی‌ترین روش که اکنون منسوخ شده است استفاده از دستور live است. این تابع، به صورت ضمنی، رویدادها را به عنصر body متصل می‌کند و بر اساس selector مشخص شده، رویدادهای مربوط به عنصر دلخواه شما را به تابع هدف هدایت می‌کند.

روش دوم که آن نیز در نگارش ۱.۷ جی‌کوئری منسوخ شد، استفاده از دستور delegate است. این دستور، رویداد delegate را به عنصری که شما مشخص کنید پیوست می‌کند. در نتیجه، از خطای احتمالی در دستور live زمانی که یکی از عنصرهای میانی، انتشار رویداد را متوقف کند، جلوگیری می‌شود.

در آخرین نگارش‌های jQuery پیوست کردن رویدادهای delegate همانند رویدادهای معمولی با استفاده از دستور on به انجام می‌رسد.

// jQuery.on( events [, selector ] [, data ], handler );
jQuery( 'table' ).on( 'click', 'td', tdClicked );
 
function tdClicked( evt ) {
	alert( $( this ).text() );
}

همان‌گونه که در مثال بالا مشاهده می‌کنید، رویداد تنها یک‌بار به عنصر table پیوست می‌شود ولی با هر کلیک روی عنصرهای داخلی از نوع td، رویداد به صورت delegate فراخوانی و متغیر this نیز به عنصر درونی اشاره خواهد کرد.

به یک شیوه‌ی دیگر نیز می‌توان به صورت ضمنی همین عملکرد را در اختیار داشت. در این روش، فیلتر کردن عنصرها به صورت دستی انجام می‌شود و با توجه به delegate نبودن رویداد، دسترسی به عنصر داخلی با استفاده از event.target به جای this ممکن خواهد بود:

jQuery( 'table' ).on( 'click', tableClicked );
 
function tableClicked( evt ) {
	if ( evt.target.nodeName == 'TD' ) {
		alert( $( evt.target ).text() );
	}
}