کار eventListener این است که گوش‌به‌زنگ ایجاد یک رویداد باشد. برای آشنایی با این مقوله در ادامه این جلسه همراه زومیت باشید.

بیایید با یک مثال ساده شروع کنیم. فرض کنید یک دکمه دارید که می‌خواهید به محض کلیک روی آن یک پیغام الرت به کاربر نمایش داده شود. در جلسات قبل یاد گرفتیم که این کار را می‌توانیم با قرار دادن یک اتریبیوت onclick روی المان اچ‌تی‌ام‌ال انجام دهیم. در این جلسه این کار را با کمک یک eventListener کلیک انجام می‌دهیم. 

برای اضافه کردن یک eventListener در جاوا اسکریپت از متد addEventListener استفاده می‌کنیم. برای اضافه کردن این متد به المان اچ‌تی‌ام‌ال ابتدا باید این المان را انتخاب کنیم. سپس متد addEventListener را به همراه دو پارامتر ثابت و همیشگی آن می‌نویسیم. این دو پارامتر یکی نوع رویداد است که می‌تواند کلیک، رفتن ماوس، خارج شدن ماوس و ... باشد و پارامتر دوم، فانکشن یا اتفاقی است که مي‌خواهیم بعد از رویداد اجرا کنیم. مثال زیر را ببینید تا درک بهتری از این صحبت‌ها داشته باشید.

HTML

<button id="btn">کلیک کنید</button>

JavaScript:

document.getElementById("btn");

حالا وقت آن رسیده است تا addEventListener را بدان اضافه کنیم. در این مثال ما می‌خواهیم بعد از رویداد کلیک یک آلرت نمایش داده شود. پس یک فانکشن بدون نام الرت برای این اتفاق می‌نویسیم.

document.getElementById("btn").addEventListener("click",function(){ alert("سلام به زومیت خوش آمدید") })

همین مثال را می‌توانیم برای رویداد دیگری مثل رفتن ماوس روی المان بنویسیم:

document.getElementById("btn").addEventListener("mouseover",function(){ alert("سلام به زومیت خوش آمدید") })

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

var element = document.getElementById("btn");

element.addEventListener("mouseover",function(){ alert("قرار دادن ماوس بر روی المان") });

element.addEventListener("click",function(){ alert("کلیک بر روی المان") });

element.addEventListener("mouseout",function(){ alert("برداشتن ماوس از روی المان") });

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

var element = document.getElementById("btn");

element.addEventListener("click", sayHello);

function sayHello() {

   alert ("HELLO");

}

همانطور که مشاهده می‌کنید، نام فانکشن sayHello را بدون پرانتز به‌عنوان پارامتر دوم addEventListener نوشته‌ایم. بدین ترتیب بعد از اتفاق افتادن رویداد کلیک این فانکشن صدا زده خواهد شد.

حذف eventListener

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

element.removeEventListener("click",remove)

function remove() {

   alert ("eventListener removed");

}

بدین ترتیب دیگر رویداد کلیک روی این المان فعال نخواهد بود.

سخن پایانی 

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