رویدادها در جاوا اسکریپت
تعاملات جاوا اسکریپت با HTML از طریق رخداد رویدادهایی که به واسطه دستکاریهایی که کاربر یا مرورگر بر روی صفحه انجام میدهد، امکان پذیر می شود. رویدادها و چگونگی تشخیص و کنترل آن ها یکی از مباحث مهم جاوا اسکریپت به شمار می رود. ما در این فصل ابتدا با مفهوم رویدادها آشنا شده و سپس به روشهای کنترل و پاسخگویی به آن ها خواهیم پرداخت.
سپس با انواع رویدادها آشنا شده و در انتها با شی event برای تشخیص خصوصیات رویدادهای رخ داده استفاده خواهیم کرد.
کنترل رویدادها
موقعی که صفحه بارگذاری می شود رویدادی رخ داده است، موقعی که کاربر بر روی دکمه ای کلیک می کند، باز هم رویدادی رخ داده است. توسعه دهندگان می توانند از این رویدادها برای اجرای کدهایی که به رویدادها پاسخ می دهند استفاده کنند. مثلا دکمه ای موجب بستن پنجره شود، پیغامی را به کاربر نمایش دهد، داده ها را اعتبارسنجی کند و….
رویدادها در واقع عملیات خاصی هستند که یا توسط کاربر یا توسط خود مرورگر انجام می شوند. این رویداد ها نام هایی همچون mouseover ، load ،click و … دارند. اصطلاحا به تابعی که در پاسخ به یک رویداد فراخوانی می شود کنترلگر رویداد می گویند. به عنوان مثال تابعی که برای پاسخ به رویداد click صدا زده می شود کنترلگر onclick نامیده می شود.
برای مشخص کردن کنترلگرهای حادثه به دو روش می توان عمل کرد: از طریق جاوا اسکریپت یا از طریق HTML ، برای مشخص کردن یک کنترلگر از طریق جاوا اسکریپت ابتدا باید به شی مورد نظر ارجاعی ایجاد کرده و سپس تابعی را به کنترلگر حادثه آن (که به صورت یک خاصیت برای آن تعریف شده است) منتسب کنیم. برای مثال :
var oDiv = document.getElementById('div1');
oDiv.onclick= function (){
alert('I Was Clicked !!!');
}
دقت کنید که در این روش باید تمامی حروف نام کنترلگر رویداد به صورت کوچک نوشته شود.
در روش دوم می توانیم یک صفت کنترلگر رویداد، که اسکریپتی را به عنوان مقدار می پذیرد در تگ مربوطه قرار دهیم. به صورت زیر:
<div onclick='alert("I Was Clicked !!!")'></div>
در این روش نام کنترلگر حادثه می تواند به هر شکلی نوشته شود. در نتیجه onclick معادل است با : OnClick یا ONCLICK .
انواع رویدادها در جاوا اسکریپت
رویدادهایی که در مرورگر رخ می دهند معمولا به چند دسته زیر تقسیم بندی می شوند:
رویدادهای mouse که وقتی کاربر از طریق ماوس خود کارهایی را انجام می دهد، رخ می دهند.
رویدادهای keyboard که وقتی کاربر دکمه ای از صفحه کلید را فشار می دهد رخ می دهند.
رویدادهای HTML که موقعی که تغییراتی در پنجره مرورگر انجام می شوند رخ می دهند.
رویدادهای تغییر که زمانی که تغییراتی در ساختار DOM صفحه انجام می شود رخ می دهند.
رویدادهای mouse در جاوا اسکریپت
رایج ترین رویدادهایی هستند که رخ می دهند و به شرح زیر می باشند:
click : موقعی که کاربر دکمه چپ ماوس را فشار می دهد رخ می دهد. (نه دکمه راست). هنگامی که تمرکز صفحه بر روی یک دکمه باشد و کاربر کلید enter را هم بزند این رویداد رخ می دهد.
dblclick : موقعی که کاربر دو بار دکمه چپ ماوس را کلیک می کند رخ می دهد.
mousedown : موقعی که کاربر هر دکمه ای از ماوس را فشار دهد رخ می دهد.
mouseout : موقعی رخ میدهد که نشانگر موس بر روی عنصر است و کاربر آن را به بیرون از محدوده عنصر هدایت میکند.
mouseover : موقعی رخ می دهد که نشانگر موس از خارج از عنصر بر روی ان هدایت می شود.
mouseup : موقعی رخ می دهد که هردکمه ای از ماوس رها می شود.
mousemove : مکررا هنگامی که نشانگر موس بر روی عنصری است رخ می دهد.
تمامی عناصر موجود در یک صفحه از رویدادهای فوق به خوبی پشتیبانی می کنند.
ترتیب اجرایی رویدادهای موس
قبل از رخداد رویداد click همیشه ابتدا رویداد mousedown و در پی آن mouseup و آخر سر click رخ می دهد.
درهنگام اجرای رویداد dblclick رویدادهای زیر به ترتیب اجرا می شوند:
mousedown .1
mouseup .2
click .3
mousedown .4
mouseup .5
click .6
dblclick .7
هنگام جا به جا شدن نشانگر ماوس از یک عنصر بر روی عنصر دیگر، ابتدا رویداد mouseout سپس رویداد mousemove برای عنصر بین این دو و آخر سر، رویداد mouseover رخ می دهد.
رویدادهای صفحه کلید
رویداد های صفحه کلید به واسطه عملیاتی که کاربر بر روی صفحه کلید انجام می دهد رخ می دهند. رویداد های صفحه کلید به شرح زیر می باشند:
keydown : هنگامی که کلیدی از صفحه کلید زده می شود رخ می دهد. این رویداد مکررا زمانی که دکمه ای پایین نگه داشته شود نیز رخ می دهد.(این رویداد همیشه قبل از keypress رخ می دهد.)
keypress : هنگامی که کلیدی از صفحه کلید زده می شود و به موجب آن یک کاراکتر برگردانده می شود رخ می دهد. این رویداد مکررا زمانی که کاربر دکمه ای را پایین نگه می دارد نیز رخ می دهد.(کلیدهای ctrl ،alt ،enter و shift موجب روخداد این رویداد نمی شوند.)
keyup : هنگامی رخ می دهد که دکمه ای که پایین بوده است رها شود.
ترتیب اجرایی رویداد های صفحه کلید
موقعی که کاربر یک کلید کاراکتری را در صفحه کلید فشار می دهد رویدا های زیر به ترتیب اجرا می شوند:
keydown .1
keypress .2
keyup .3
اگر کلیدی غیر کاراکتری مثل shift فشار داده شود رویدا های زیر به ترتیب اجرا می شوند:
keydown .1
۲. keyup
اگر کاربر کلیدی کاراکتری را فشارداده و پایین نگه دارد رویدادهای keypress و keydown مکررا یکی پس از دیگری رخ می دهند تا زمانی که کلید رها شود.
اگر کاربر کلیدی غیر کاراکتری را فشارداده و پایین نگه دارد فقط رویداد keydown مکررا اجرا می شود.
دیگر رویدادها در جاوا اسکریپت
از دیگر رویدادهایی که ممکن است در صفحه و بر روی بعضی از عناصر رخ دهد می توان به موارد زیر اشاره نمود:
load : موقعی رخ می دهد که صفحه به طور کامل بارگذاری شود یا اینکه یک عنصر img یا object به طور کامل بارگذاری شوند. برای فعال کردن کنترلگرهای رویداد onload برای صفحه آن را در دستور <body> قرار می دهیم.
برای مثال در عبارت زیر از این رویداد استفاده کرده ایم تا پس از خاتمه بارگذاری صفحه پیغام loading complete نمایش داده شود :
<body onload='alert("loading complete !!!")'></body>
این رویداد برای تگ هایی همچون iframe ،img ،embed ،body و script قابل استفاده است.
unload : هنگامی رخ می دهد که کاربر صفحه بار شده جاری را ببندد. این می تواند به موجب زدن دکمه X پنجره یا وارد کردن یک آدرس جدید در نوار آدرس مرورگر باشد.
abort : این رویداد برای یک object هنگامی که کاربر قبل از بارگذاری کامل آن ، عمل بارگذاری را متوقف کند رخ می دهد.
error : این رویداد برای یک صفحه هنگامی که در آن یک خطا رخ می دهد، برای یک عکس هنگامی که نتواند بارگذاری شود و برای یک عنصر object هنگامی که نتواند بارگذاری شود رخ می دهد.
select : این رویداد هنگامی رخ می دهد که کاربر یک یا چند کاراکتر را از داخل یک ناحیه متنی (منظور تگ های textarea و input) انتخاب کند رخ می دهد.
change : بر روی یک ناحیه متنی، هنگامی که مقدار داخل ناحیه متنی تغییر کرده و در ادامه تمرکز صفحه از روی عنصر خارج شود و برای یک عنصر select هنگامی که مقدار آن تغییر می کند رخ می دهند.
submit : برای عنصر form ، هنگامی که دکمه submit مربوط به فرم کلیک می شود رخ می دهد.
reset : برای عنصر form ، هنگامی که دکمه reset مربوط به فرم کلیک می شود رخ می دهد.
focus : برای یک عنصر زمانی که تمرکز صفحه بر روی آن قرار می گیرد رخ می دهد.
blur : برای یک عنصر زمانی که تمرکز صفحه را از دست می دهد رخ می دهد.
شی event
شی event که در نسخه ۱.۲ و بالاتر جاوا اسکریپت در دسترس قرار گرفته است، شی خاصی است که به همراه هر رویداد برای کنترلگر آن رویداد فرستاده می شود. در واقع کنترلگر رویداد می تواند آن را به عنوان یکی از پارامترها دریافت کند و خاصیت های شی event اطلاعاتی را در مورد آن رویداد در دسترس برنامه نویسان قرار می دهد.
بعضی از اطلاعاتی که این شی در اختیار قرار می دهد به شرح زیر است:
شی ای که موجب رخداد رویداد شده است.
اطلاعاتی در مورد نشانگر ماوس درهنگام رخداد رویداد
اطلاعاتی در مورد صفحه کلید در هنگام رخداد رویداد
برای دسترسی به این شی می توان به چندین طریق عمل کرد:
در Internet Explorer ، این شی به عنوان یکی از خواص شی window قابل دسترسی است. این بدین معنی است که یک کنترلگر رویداد به طریق زیر می تواند به شی event دسترسی داشته باشد :
oDiv.onclick = function () {
var oEvent = window.event;
}
اگر چه این شی به عنوان یکی از خواص window شناخته می شود اما فقط زمانی در دسترس است که رویدادی رخ داده باشد. بعد از اینکه کنترلگر رویداد به طور کامل اجرا شد، شی event نیز از بین خواهد رفت.
اما در استانداردهای DOM می توان از روش دسترسی به آرگومان تابع برای دسترسی به شی event استفاده کنیم. به عنوان مثال :
oDiv.onclick = function () {
var oEvent = arguments[0];
}
البته می توان نامی برای این آرگومان مشخص کرد و از آن برای دسترسی استفاده نمود :
oDiv.onclick = function (oEvent) {
...
}
خواص و متدهای شی event
این شی شامل خواص و متدهایی است که در ادامه بررسی خواهیم کرد:
shiftkey : اگر دکمه shift زده شده باشد true و در غیر این صورت false را برمی گرداند.
altkey : اگر دکمه alt زده شده باشد true و در غیر این صورت false را برمی گرداند.
ctrlkey : اگر دکمه ctrl زده شده باشد true و در غیر این صورت false را برمی گرداند.
button : مشخص می کند که کدام یک از دکمه های ماوس زده شده اند. مقادیری که این خاصیت برمی گرداند به شرح زیر است:
٠: هیچ دکمه ای زده نشده است.
١: دکمه چپ زده شده است.
٢: دکمه راست زده شده است.
٣: دکمه چپ و راست با هم زده شده اند.
۴: دکمه وسط زده شده است.
۵: دکمه های چپ و وسط با هم زده شده اند.
۶: دکمه های راست و وسط با هم زده شده اند.
٧: هر سه دکمه با هم زده شده اند.
pageX و pageY : مختصات افقی و عمودی ماوس را نسبت به گوشه چپ و بالای صفحه در هنگام رخداد رویداد را مشخص می کند.
type : نوع رویدادی که رخ داده است را برمی گرداند مثلا click و mouseover و …
keyCode : عددی است که مشخص می کند کدام دکمه از صفحه کلید فشار داده شده است. (درمرورگرهایی همچون Firefox ، Opera می بایست از خاصیتی به نام which برای بدست آوردن کد کاراکتری دکمه ای از صفحه کلید که فشار داده شده است استفاده می شود.)
target : شی ای را که در معرض حادثه قرار گرفته است را مشخص می کند (مانند یک سند یا یک پیوند)
به پایان فصل دهم از آموزش جاوا اسکریپت و مبحث مربوط به رویدادها در جاوا اسکریپت رسیدیم. امیدواریم این مقاله برای شما مفید واقع قرار گرفته شده باشد. در صورتی که مشکلی در رابطه با این موضوع دارید ، از بخش نظرات زیر با ما به اشتراک بگذارید.
دیدگاه ها