رویداد شنونده (Event Listener) چیست؟

رویداد شنونده چیست؟

یک رویداد شنونده (Event Listener) در جاوااسکریپت تابعی است که منتظر وقوع یک رویداد می‌ماند و سپس به آن پاسخ می‌دهد. جاوااسکریپت یک زبان برنامه‌نویسی است که توسعه‌دهندگان از آن برای ساخت صفحات وب تعاملی استفاده می‌کنند. تابع رویداد شنونده جاوااسکریپت به شما امکان می‌دهد پاسخ‌های سفارشی برای رویدادهایی مانند کلیک‌های ماوس، کلیک‌های صفحه کلید و تغییر اندازه پنجره ایجاد کنید. الگوی برنامه‌نویسی انتظار و پاسخ به رویدادهای بی‌درنگ، مدیریت رویداد (Event Handling) نامیده می‌شود.

نحوه نگارش تابع رویداد شنونده چگونه است؟

تابع رویداد شنونده ویژگی‌های مشابهی با سایر توابع جاوااسکریپت دارد. هنگام فعال شدن، اقدام لازم را برای پردازش رویداد انجام می‌دهد. برای مثال، تابع رویداد شنونده می‌تواند متن نمایش داده شده را تغییر دهد، اطلاعات را از فرم‌های ثبت‌نام جمع‌آوری کند یا داده‌ها را در پایگاه‌های داده ذخیره کند.

نحوه نگارش رویداد شنونده

یک تابع رویداد شنونده از نحوه نگارش صحیح جاوااسکریپت پیروی می‌کند، مانند مثال بعدی.

function RespondMouseClick() {
    document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}

این مثال تابع رویداد شنونده RespondMouseClick را نشان می‌دهد. نوشتن نام تابع به گونه‌ای که هدف رویداد شنونده را منعکس کند، رایج است. در تابع، کدهایی را برای انجام اقدامات خاص هنگام وقوع رویداد می‌نویسید. در این مثال، تابع متن MouseClick happened را به عنصر HTML textdisplay1 اضافه می‌کند.

نحوه نگارش رویداد پرداز

به عنوان یک راه حل دیگر، می‌توانید از یک تابع رویداد پرداز (Event Handler) برای پاسخ به رویداد فعال شده، مانند مثال زیر استفاده کنید.

function eventHandler(event) {
  if (event.type === "fullscreenchange") {
    console.log ("full screen toggle");
  } else {
    console.log ("full screen error");
  }
}

این به شما امکان می‌دهد چندین نوع رویداد را از یک عنصر خاص با یک تابع مدیریت کنید.

برای مثال، می‌توانید یک رویداد شنونده را برای مدیریت همه انواع رویدادهای بلاک چین در برنامه‌های مبتنی بر رویداد ثبت کنید. برای اطلاعات بیشتر، در مورد ساخت یک برنامه مبتنی بر رویداد با Amazon Managed Blockchain بخوانید.

چگونه یک رویداد شنونده اضافه کنیم؟

یک رویداد شنونده فقط پس از اضافه کردن آن به عنصر جاوااسکریپت مربوطه فعال می‌شود. برای انجام این کار، می‌توانید از نحوه نگارش زیر استفاده کنید:

element.addEventListener(event, listener);
element.addEventListener(event, listener, useCapture);
element.addEventListener(event, listener, options);

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

btn.addEventListener("click", RespondMouseClick);

همچنین می‌توانید چندین رویداد شنونده را به یک شیء رویداد خاص بدون بازنویسی رویدادهای پرداز موجود اضافه کنید.

برای مثال، سرویس‌های وب آمازون (AWS) به توسعه‌دهندگان اجازه می‌دهد چندین callback را روی شیء AWS.Request زنجیر کنند. برای اطلاعات بیشتر، در مورد نحوه استفاده از یک رویداد شنونده شیء درخواست در AWS بخوانید.

پارامترها برای اضافه کردن رویدادها

در اینجا توضیحی از پارامترهای نحوه نگارش قبلی آمده است:

• پارامتر event هر رویداد معتبر جاوااسکریپت است، مانند کلیک، تغییر، حرکت ماوس، پایین کلید و بارگذاری.
• پارامتر listener، callback رویداد یا تابع جاوااسکریپتی است که برای پاسخ به رویدادهای خاص ایجاد شده است.
• پارامتر useCapture یک پارامتر اختیاری است که حالت انتشار رویداد را نشان می‌دهد. مقادیر بولی را می‌پذیرد، جایی که true ضبط را فعال می‌کند در حالی که false حباب‌زدایی را فعال می‌کند. مقدار پیش‌فرض این پارامتر روی false تنظیم شده است.
• پارامتر options شامل چندین مقدار اختیاری، از جمله حالت ضبط و سیگنال‌های رد است که نشان دهنده رفتارهای شنونده هستند.

چگونه یک رویداد شنونده را حذف کنیم؟

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

element.removeEventListener(type, listener, useCapture);

پارامترهای حذف رویداد شنونده مشابه پارامترهایی هستند که برای اضافه کردن رویدادهای شنونده استفاده می‌کنید. هنگام حذف یک رویداد شنونده، باید پارامترهای type، listener و useCapture یکسانی را مشخص کنید. اگر این کار را نکنید، رویداد شنونده فعال می‌ماند و به فعال شدن برای رویدادهای آینده ادامه می‌دهد.

برای مثال، می‌توانید یک رویداد را با کد زیر اضافه کنید.

button.addEventListener("click", RespondMouseClick, true);

اما اعمال کد زیر نمی‌تواند رویداد شنونده را حذف کند. زیرا مقدار useCapture با مقداری که در شیء دکمه ثبت شده است، متفاوت است.

button.removeEventListener("click", RespondMouseClick, false);

برای حذف موفقیت‌آمیز رویداد و جلوگیری از فعال شدن آن، می‌توانید از کد زیر استفاده کنید.

button.removeEventListener("click", RespondMouseClick, true);

نحوه عملکرد توابع رویداد شنونده تودرتو چگونه است؟

رویدادهای شنونده تودرتو، رویدادهای پرداز هستند که به عناصر HTML در لایه‌های سلسله مراتبی مختلف اضافه می‌شوند.

در مثال HTML زیر، سند مالک عنصر والد زیرین است، در حالی که والد مالک فرزند است.

<div class="document">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

برنامه‌های وب پیچیده ممکن است دارای چندین لایه والد-فرزند با توابع رویداد شنونده مربوطه باشند. هنگامی که یک رویداد خاص رخ می‌دهد، رویدادهای شنونده را در لایه‌های مختلف به ترتیب خاصی فعال می‌کند. برای مثال، کلیک روی یک دکمه فرزند، رویداد را به همه پردازکننده‌هایی که کلیک ماوس را می‌گیرند، منتشر می‌کند.

رویدادها می‌توانند در دو حالت منتشر شوند – حباب‌زدایی و ضبط.

حباب‌زدایی رویداد

حباب‌زدایی حالت پیش‌فرض مدیریت رویداد جاوااسکریپت است. رویداد را از درونی‌ترین لایه به بیرونی‌ترین لایه منتشر می‌کند.

برای مثال، یک کاربر می‌تواند روی یک جعبه متن در بخش فرزند حرکت کند. سپس، برنامه می‌تواند رویداد را به ترتیب زیر ارسال کند:

1. رویداد شنونده در فرزند، رویداد حرکت ماوس را مدیریت می‌کند.
2. سپس، رویداد شنونده والد، رویداد را پردازش می‌کند و کنترل را به رویداد شنونده سند منتقل می‌کند.

برای تنظیم حباب‌زدایی رویداد، از نحوه نگارش زیر استفاده کنید:

element.addEventListener(event, listener, [false]);
element.addEventListener(event, listener);

ضبط رویداد

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

برای مثال، یک کاربر می‌تواند روی یک دکمه فرزند کلیک کند و توالی زیر را شروع کند:

1. رویداد شنونده سند، رویداد کلیک ماوس را پردازش می‌کند و پس از آن رویداد پرداز والد می‌آید.
2. رویداد به عنصر هدف، که دکمه است، می‌رسد. رویداد شنونده دکمه، رویداد را پردازش می‌کند.
3. مدیریت رویداد از حالت ضبط به حالت حباب‌زدایی تغییر می‌کند.
4. همان رویداد کلیک ماوس، رویداد پرداز را در والد قبل از پایان در سند ختم می‌شود.