آموزش جاوا اسکریپت – Event Listener در جاوا اسکریپت

آموزش جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم در مورد Event Listener در جاوا اسکریپت صحبت کنیم.

 

درک Event Listener در جاوا اسکریپت

Event Listener همانند event handler ها (هنلدر رویداد) هستند با این تفاوت که شما می توانید که می توانید تعداد بیشتری Event Listener را به یک رویداد یا المان خاص اختصاص بدید.

برای درک اینکه چگونه Event Listener ها کار می کنند, به مثال زیر توجه کنید.

فرض کنیم قصد دارید دو تابع ایجاد کنید و می خواهید هر دو آنها را با کلیک روی هندلر رویداد onclick اجرا کنید همانطور که در مثال زیر نشان داده شده :

اگر مثال بالا را اجرا و روی المان button کلیک کنید, فقط تابع secondFunction() اجرا خواهد شد چراکه هنلدر رویداد دومی روی اولی بازنویسی می شود.

این یکی از کمبودهای اصلی مدل رویداد کلاسیک است که شما تنها می توانید یک هندلر رویداد را به رویداد خاص روی المان اختصاص بدید.

برای حل این مشکل, W3C یک مدل رویداد منعطف تر به نام Event listeners را معرفی کرده است.

هر المان HTML می تواند چندین event listeners داشته باشد, بنابراین می توانید چندین تا به را به همان رویداد و همان المان اختصاص بدید.

حالا, اگر مثال بالا را اجرا کنید و دکمه را کلیک کنید هر دو تابع اجرا خواهند شد.

 

افزودن Event Listener ها به نوع رویدادهای متفاوت

همانند هندلر رویداد, می توانید Event Listener های متفاوت را به نوع رویدادهای مخنلف روی المان یکسان اختصاص بدید.

مثال زیر توابع Event Listener مختبف را به رویدادهای click, mouseover, mouseout از یک المان button را نشان می دهد.

 

افزودن Event Listener به شی window

متد addEventListener() به شما اجازه می دهد که event listener ها را به هر المان HTML DOM , شی document,window یا آبجکتی دیگری که رویدادها را پشتیبانی می کند مثل XMLHttpRequest اضافه کنید.

یک مثاب از افزودن یک event listener به رویداد resize شی window را می بینید.

 

حذف event listener

می توانید از removeEventListener() برای حذف یک event listener ای که قبلا توسط addEventListener() اضافه شده استفاده کنید.

 

امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش Event Listener در جاوا اسکریپت نهایت استفاده را برده باشد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. حامدم ۱۰ فروردین ۱۴۰۰

    ممنون
    عالی بود

    پاسخ
    1. حسن شفیعی ۱۰ فروردین ۱۴۰۰

      سلام.
      خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
دوره های آموزشی