کار با رویدادها یا Events در جاوااسکریپت

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

کار با رویدادها یا Events در جاوااسکریپت

Free-Learn

کار با رویدادها یا Events در جاوااسکریپت

خب اصلا این رویدادها یعنی چی؟ ببینید دوستان ما یسری صفات در زبان HTML داریم که بهشون میگن رویداد یا Event ( یا یه چیزی که میتونه اتفاق بیوفته )

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

بفرض مثال من میخوام وقتی روی یه دکمه کلیک شد ، یه پیغام به من نشون بده و بگه سلام ، خب ما اینجا ۲ چیز نیاز داریم :

  • خوده رویداد که گفتیم متعلق به زبان HTML می باشد و در خوده عنصر قرارش میدیم
  • و اون واکنشی که قراره توسط زبان JS اتفاق بیوفته

مثال : وقتی بروی دکمه کلیک شد ، پیغام نشون میده ( سلام خوبی؟ )

امتحان کنید

توضیح مثال بالا :

خب در مثال بالا ما گفتیم آقا وقتی بروی دکمه کلید شد، شما یه پیغام به ما نشون بده

الان اون onclick میشه ( همون صفت رویداد که درون یک تگ استفاده میشه ) و معنیش هم مشخصه دیگه ، یعنی وقتی کلیک شد بروی چیزی ( حالا میخواد دکمه باشه یا تصویر یا هرچیز دیگه ای )

و در نهایت اون چیزی که درون این رویداد نوشته شده دستورات جاوااسکریپت می باشد برای ایجاد یه اتفاق ( واکنش به رویداد ) که میدونیم دستور alert یعنی یه باکس پیغام.

مثال شماره ۲ : وقتی صفحه لود شد، پیغام بده سلام خوبی؟

امتحان کنید

توضیح مثال بالا :

در مثال بالا از رویداد onload استفاده کردیم، این رویداد اسمشم روشه یعنی لحظه ی لود ( بالا اومدن ) چیزی ( مثلا ما در تگ body استفاده کردیم یعنی موقع بالا اومدن صفحه )

Free-Learn

نحوه ایجاد یک رویداد در عناصر HTML

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

چندین روش برای تعریف رویدادها در عناصر وجود داره که این روش ها بصورت زیر می باشند :

  • روش اول » استفاده از رویدادها در خوده عناصر HTML ( همانند مثال زیر )

یعنی بصورت دستی خودمون رویداد رو میزاریم داخل عنصر مورد نظرمون ، برای مثال در دستور زیر از رویداد onclick ( یعنی وقتی کلیک شد روی عنصر ) در یک دکمه استفاده کردیم.

امتحان کنید

  • روش دوم » تعریف رویداد از طریق جاوااسکریپت ( همانند مثال زیر )

تو این روش ما میتونیم با استفاده از متد addEventListener از داخل دستورات JS رویداد مورد نظرمون رو برای عنصر مورد نظر مشخص کنیم.

امتحان کنید

Free-Learn

برخی از رویدادهای پرکاربرد HTML

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

یعنی در مثال های بالا خوده onclick و onload رویداد هامون هستند و اون چیزی که درون این رویدادها قرار میگیرند در واقع همون واکنشی هستند که باید اتفاق بیوفتن.

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

پیشنهاد میکنم لیست کامل رویدادهای عمومی زبان HTML را مشاهده نمایید.

نام رویداد توضیح
onclick وقتی روی چیزی کلیک شد
onchange وقتی محتوای یه چیزی تغییر کنه
onmouseover وقتی ماوس میره روی یه چیزی
onmouseout وقتی ماوس از روی چیزی خارج شه
onkeydown وقتی یه دکمه از صفحه کلید فشار داده بشه
onload وقتی صفحه بطور کامل لود بشه

Free-Learn

مثال های بیشتر

در ادامه میخوام چندین مثال کاربردی باهمدیگه در رابطه با رویدادها در جاوااسکریپت داشته باشیم، لطفا در ادامه با من همراه باشید.

مثال شماره ۱ : استفاده از رویداد OnMouseOver ( میخوایم وقتی ماوس رفت روی تصویر، تصویر عوض شه ) – یه تابع با استفاده از JS ایجاد کردیم بعدش تابع رو در رویداد onmouseover استفاده کردیم ، یعنی داره میگه وقتی ماوس رفت روی تصویر، شما تابع ()change_picture رو اجرا کن.

امتحان کنید

مثال شماره ۲ : استفاده از رویداد onchange ( برای وقتی محتوای یه عنصر تغییر کند )

امتحان کنید

مثال شماره ۳ : استفاده از رویداد onsubmit ( برای وقتی بروی دکمه submit یا دکمه ارسال در فرم کلیک شود ) – میخوایم کاری کنیم که اگه فیلدهای موجود در فرم خالی بودن یه پیغام بده و بگه باید فیلد تکمیل شود.

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب