طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۱


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

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

 

درک رویدادها و هندلر رویداد ها در جاوا اسکریپت

یک رویداد (event) چیزی است که هنگام تعامل کاربر با صفحه وب اتفاق می افتد, مثل زمانی که روی یک لینک یا دکمه کلیک می کند, متنی را داخل باکس متن وارد می کند, گزینه ای از لیست را انتخاب می کند, دکمه ای از کیبورد را می فشارد, نشانگر ماوس را حرکت می دهد, فرم را سابمیت می کند و غیره… .

در بعضی مواقع نیز خود مرورگر می تواند باعث یک رویداد شود, مثل لود صفحه.

زمانی که رویدادی رخ می دهد, می توانید از هندلر رویداد ها در جاوا اسکریپت (یا یک event listener) برای شناسایی آنها و انجام یک عملیات خاص یا مجموعه ای از عملیات, استفاده کنید.

با توافق, نام هندلر رویداد ها در جاوا اسکریپت همیشه با کلمه “on” شروع می شود پس یک هندلر رویداد برای کلیک onclick است.

مشابه آن یک هندلر برای رویداد لود شدن onload و برای رویداد blur نیز onblur است.

(منظور از هندلر همان handler یا دستیار یا مدیر رویداد است)

 

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

برای مثال, به منظور مشخص کردن هندلر کلیک برای المان دکمه, از onclick بصورت زیر استفاده می کنیم:

به هر حال برای برای جدا کردن کدهای جاوا اسکریپت از HTML می توانید از فایل خارجی جاوا اسکریپت یا داخل تگ های <script>‌ و </script> قرار بدید :

نکته : از آنجایی که خصوصیات HTML حساس به حروف نیستند می توانید onclick را بصورت onClick, OnClick یا ONCLICK بنویسید اما مقادیر آنها حساس به حروف کوچک و بزرگ هستند.

حتما بخوانید  آموزش جاوا اسکریپت – عملیات ریاضی در جاوا اسکریپت (کار با اعداد)

بطور معمول, ما رویداد ها در جاوا اسکریپت را به چهار گروه اصلی رویدادهای ماوس (mouse), کیبورد (keybord), فرم (form) و سند/پنجره (document/window) تقسیم می کنیم.

رویدادهای دیگری نیز وجود دارد که در بخش های بعدی یاد می گیریم. در بخش زیر بطور خلاصه چندتا از پرکاربردترین ها در پروژه های واقعی را بررسی می کنیم.

 

رویدادهای ماوس

یک رویداد ماوس با کلیک کاربر روی المان, حرکت دادن اشاره گر ماوس روی یک المان و غیره اجرا می شود.

بعضی از مهمترین رویدادهای ماوس و هندلر آنها را در زیر می بینید :

رویداد کلیک (onclick)

رویداد click زمانی اتفاق می افتد که کاربر روی یک المان در صفحه وب کلیک کند. بعضی مواقع, اینها المان های فرم و لینک ها هستند. و می توانید آن را با هنلدر onclick مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که روی یک المان کلیک می شود نشان می دهد.

رویداد منوی کلیک راست (oncontextmenu)

رویداد contextmenu زمانی که روی یک المان بری باز شدن منو کلیک می کنیم, اجرا می شود. و می توانید آن را با هنلدر oncontextmenu مدیریت کنید.

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

رویداد ماوس بر (onmouseover)

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

حتما بخوانید  آموزش جاوا اسکریپت - دستور شرطی switch…case در جاوا اسکریپت

در مثال زیر به شما یک پیام alert را زمانی که اشاره گر ماوس روی یک المان قرار می گیرد نشان می دهد.

رویداد ماوس خارج از (onmouseout)

رویداد ماوس بر زمانی اجرا می شود که اشاره گر ماوس را از روی یک المان خارج کنیم/برداریم. و می توانید آن را با هنلدر onmouseout  مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که اشاره گر ماوس از روی یک المان برداشته می شود نشان می دهد.

 

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

در بخش بعدی با قسمت دوم رویدادها در جاوا اسکریپت آشنا می شوید.

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

موفق باشید.

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش جامع طراحی سایت

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه