رویدادها (Event) در جاوا اسکریپت

به نام خدا با عرض سلام و وقت بخیر خدمت دوستان عزیز در راستای اموزش جاوا اسکریپت این جلسه به مبحث رویدادها (Event) در جاوا اسکریپت خواهیم پرداخت با ما همراه باشید.

درک و مدیریت رویدادها (Event) در جاوا اسکریپت

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

هنگامی که یک رویداد رخ می دهد، شما می توانید از یک event handler جاوا اسکریپت (event listener) برای شناسایی آنها و انجام یک کار خاص یا مجموعه ای از تسک ها استفاده کنید.. طبق قرارداد، نام کنترل‌کننده‌های رویداد(event handlers) همیشه با کلمه «on» شروع می‌شود، بنابراین یک کنترل‌کننده رویداد برای رویداد کلیک،  onclick نامیده می‌شود، به طور مشابه، یک کنترل‌کننده رویداد برای رویداد بارگذاری،  onloadو ….

رویدادها (Event) در جاوا اسکریپت

راه های مختلفی برای اختصاص یک کنترل کننده رویداد وجود دارد. ساده ترین راه این است که آنها را مستقیماً به تگ شروع عناصر HTML با استفاده از اتریبیوت های کنترل رویداد اضافه  کنید.به عنوان مثال، برای اختصاص یک کنترل کننده کلیک برای یک عنصر دکمه، می توانیم از ویژگی onclick مانند زیر استفاده کنیم:

با این حال، برای جدا نگه داشتن جاوا اسکریپت از HTML، می توانید کنترل کننده رویداد را در یک فایل جاوا اسکریپت خارجی یا در تگ های  <script> و </script> اجرا کنید.به عنوان مثال:

توجه: از آنجایی که ویژگی های HTML به حروف بزرگ و کوچک حساس نیستند، بنابراین onclick ممکن است به صورت onClick، OnClick یا ONCLICK نیز نوشته شود. اما مقدار آن به حروف کوچک و بزرگ حساس است.
به طور کلی، رویدادها را می توان به چهار گروه اصلی دسته بندی کرد – رویدادهای ماوس، رویدادهای صفحه کلید، رویدادهای فرم و رویدادهای داکیومنت/window.بسیاری از رویدادهای دیگر نیز وجود دارد که دربخش های بعدی با آنها آشنا خواهیم شد.بخش زیر یک مرور مختصر از مفیدترین رویدادها را به همراه مثال‌های عملی  ارائه می‌کند.

رویداد های ماوس (Mouse Events) درجاوا اسکریپت

یکی از رویدادها (Event) در جاوا اسکریپت رویداد های ماوس میباشد.زمانی که کاربر روی یک عنصر کلیک می‌کند، نشانگر ماوس را روی یک عنصر می‌برد، رویداد ماوس فعال می‌شود. در اینجا برخی از مهم‌ترین رویدادهای ماوس و کنترل‌کننده رویداد آن‌ها آمده است.

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

رویداد کلیک زمانی رخ می دهد که کاربر بر روی عنصری در یک صفحه وب کلیک می کند. اغلب، اینها عناصر فرم و پیوند هستند. شما می توانید یک رویداد کلیک را به وسیله کنترل کننده رویداد onclick  مدیریت کنید.مثال زیر زمانی که روی عناصر کلیک می کنید یک پیام هشدار به شما نشان می دهد.

رویداد (oncontextmenu)

رویداد  contextmenu زمانی اتفاق می‌افتد که کاربر روی یک عنصر راست  کلیک می‌کند تا  contextmenu باز شود. شما می توانید یک رویداد  contextmenu را با یک کنترل کننده رویداد  oncontextmenu مدیریت کنید.مثال زیر با کلیک راست بر روی عناصر، پیام هشداری را نشان می دهد.

رویداد (onmouseover)

رویداد Mouseover زمانی اتفاق می افتد که کاربر نشانگر ماوس را روی یک عنصر حرکت می دهد.شما می توانید رویداد mouseover را با کنترل کننده رویداد onmouseover مدیریت کنید.

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

رویداد (onmouseout)

رویداد mouseout زمانی رخ می دهد که کاربر نشانگر ماوس را به خارج از یک عنصر حرکت می دهد.شما می توانید رویداد mouseout را با کنترل کننده رویداد  onmouseout مدیریت کنید. مثال زیر به شما یک پیام هشدار را هنگام رخ دادن رویدادmouseout  نشان می دهد.

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

یک رویداد keyboard  زمانی فعال می شود که کاربر کلیدی را روی صفحه کلید فشار داده یا رها کند. در اینجا برخی از مهمترین رویدادهای keyboard  و مدیریت رویداد آنها آورده شده است.

رویداد onkeydown

رویداد keydown زمانی رخ می دهد که کاربر کلیدی را روی صفحه کلید فشار دهد. شما می توانید رویداد keydown را با کنترل کننده رویداد  onkeydown مدیریت کنید. مثال زیر زمانی که رویداد keydown رخ می دهد یک پیام هشدار به شما نشان می دهد.

رویداد onkeyup

رویداد keyup زمانی رخ می دهد که کاربر کلیدی را روی صفحه کلید رها کند.می توانید رویداد keyup را با کنترل کننده رویداد  onkeyup مدیریت کنید. مثال زیر زمانی که رویداد keyup رخ می دهد یک پیام هشدار به شما نشان می دهد.

رویداد onkeypress

رویداد keypress  زمانی اتفاق می‌افتد که کاربر کلیدی را روی صفحه کلید فشار می‌دهد که دارای یک مقدار کاراکتر مرتبط با آن است.به عنوان مثال، کلیدهایی مانند Ctrl، Shift، Alt، Esc، کلیدهای جهت دار و غیره یک رویداد کلیدی ایجاد نمی کنند، بلکه یک رویداد keydown و keyup ایجاد می کنند.

می توانید رویداد keypress  را با کنترل کننده رویداد onkeypress مدیریت کنید. مثال زیر زمانی که رویداد keypress  رخ می دهد یک پیام هشدار به شما نشان می دهد.

رویدادهای فرم (form) در جاوا اسکریپت

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

رویداد onfocus

رویداد focus زمانی اتفاق می افتد که کاربر به عنصری در یک صفحه وب فوکوس مینماید.می توانید رویداد focus را با کنترل کننده رویداد  onfocus مدیریت کنید. مثال زیر پس‌زمینه ورودی متن را با focus به رنگ زرد برجسته می‌کند.

 رویداد onchange

رویداد change زمانی رخ می دهد که کاربر مقدار یک عنصر فرم را تغییر دهد.می توانید رویداد change را با کنترل کننده رویداد  onchange مدیریت کنید. مثال زیر هنگامی که گزینه را در سلکشن باکس تغییر می دهید، یک پیام هشدار به شما نشان می دهد.

 رویداد onsubmit

رویداد ارسال تنها زمانی رخ می دهد که کاربر فرمی را در یک صفحه وب ارسال کند.شما می توانید رویداد ارسال را با کنترل کننده رویداد  onsubmitمدیریت کنید. مثال زیر هنگام ارسال فرم به سرور یک پیام هشدار را به شما نشان می دهد.

رویدادهای Document/Window

رویدادها همچنین در مواقعی فعال می‌شوند که صفحه بارگیری شده است یا زمانی که کاربر اندازه پنجره مرورگر را تغییر می‌دهد، و.. در این قسمت برخی از مهمترین رویدادهای document/window و مدیریت رویداد آنها آورده شده است.

رویداد onload

رویداد بارگیری زمانی اتفاق می‌افتد که بارگیری یک صفحه وب در مرورگر وب به پایان برسد.شما می توانید رویداد load را با کنترل کننده رویداد  onload مدیریت کنید. مثال زیر به محض اتمام بارگذاری صفحه به شما یک پیام هشدار را نشان می دهد.

رویداد onunload

رویداد unload زمانی رخ می دهد که کاربر صفحه وب فعلی را ترک می کند.شما می توانید رویداد unload را با کنترل کننده رویداد onunload مدیریت کنید. مثال زیر زمانی که می خواهید صفحه را ترک کنید یک پیام هشدار به شما نشان می دهد.

رویداد onresize

رویداد resize  زمانی رخ می دهد که کاربر اندازه پنجره مرورگر را تغییر دهد. ایونت resize نیز در شرایطی رخ می دهد که پنجره مرورگر به حداقل یا حداکثر می رسد.می توانید رویداد resize  را با کنترل کننده رویداد  onresize مدیریت کنید. مثال زیر هنگامی که اندازه پنجره مرورگر را به عرض و ارتفاع جدید تغییر می دهید، یک پیام هشدار به شما نشان می دهد.

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

سایر مقالات 

آرایه ها در جاوا اسکریپت 

مرتب سازی آرایه ها در جاوا اسکریپت

 

 

 

 

 

 

 

 

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

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