جاوا اسکریپت به زبان ساده - جلسه بیستم: eventListener

ساخت وبلاگ

در جلسات گذشته نحوه قرار دادن رویداد یا event (مثل رویداد کلیک ) را روی المان های اچ تی ام ال فراگرفتیم. حالا قصد داریم با مفهوم جدیدی برای قرار دادن رویدادها در جاوا اسکریپتآشنا شویم.

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

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

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

HTML

id="btn">کلیک کنید

JavaScript:

document.getElementById("btn");

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

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

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

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

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

varelement =document.getElementById("btn");

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

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

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

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

varelement =document.getElementById("btn");

element.addEventListener("click", sayHello);

functionsayHello() {

alert ("HELLO");

}

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

حذف eventListener

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

element.removeEventListener("click",remove)

functionremove() {

alert ("eventListener removed");

}

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

سخن پایانی

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

علم وفناوری...
ما را در سایت علم وفناوری دنبال می کنید

برچسب : نویسنده : 9elme1404c بازدید : 219 تاريخ : سه شنبه 8 خرداد 1397 ساعت: 13:05