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

ناصر نادری | 1393/11/24


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

کلا رویدادهای جاوا اسکریپت در سطح مرورگر رخ میده و سمت کلاینت (client side) هست (البته جز مسئله ajax) . یعنی مثلا وقتی فرم html بالا میاد چه اتفاقی بیفته یا وقتی روی یک تصویر کلیک میکنید چه عملی انجام بشه و ....

برای اینکه با رویداده در جاوا اسکریپت کار کنید باید با خاصیت رویداد تگهای  html آشنا باشید (ما فرض میکنیم شما html بلد هستید) . تقریبا تمام تگهای html یک سری رویداد  طبق لیست زیر دارن :

رویدادهای مربوط به المنهای فرم (مثل دکمه و جعبه متن) onblur - زمانی که کاربر یک فیلد رو ترک کنه . onchange - زمانی که کاربر محتوی یک فیلد ورودی را تغییر بده اتفاق میفته. onchange - وقتی کاربر یک گزینه از لیست کشویی را انتخاب میکنه. onfocus - وقتی وارد یک فیلد ورودی میشید  اتفاق میفته . onselect - وقتی متن داخل فیلد ورودی مانند جعبه متن رو انتخاب میکنید . onsubmit - وقتی کاربر دکمه ساب میت رو کلیک کنه . onreset - وقتی کاربر دکمه reset رو کلیک میکنه (پاک شدن محتویات فیلدهای فرم) onkeydown - وقتی کاربر یک دکمه رو فشار میده و نگه میداره . onkeypress - وقتی کاربر یک دکمه رو فشار میده . onkeyup - وقتی کاربر دکمه فشار داده شده رو رها میکنه . رویدادهای مربوط به ماوس onmouseover/onmouseout - وقتی ماوس وارد حیطه یک تگ شده و از اون خارج میشه . onmousedown/onmouseup - وقتی یک دکمه از ماوس کلیک و سپس رها میشه . onmousedown - وقتی دکمه ماوس کلیک میشه onmousemove/onmouseout - وقتی  اشاره گر ماوس وارد یک تصویر شده و از آن خارج میشود . رویدادهای مربوط به کلیک onclick - وقتی یک دکمه کلیک میشه ondblclick - وقتی  دابل کلیک اتفاق میفته . رویدادهای لود یا بارگذاری onload - وقتی صفحه html لود میشه. onload - وقتی یک تصویر لود میشه  . onerror - وقتی درهنگام لود یک تصویر خطایی رخ میده. onunload - وقتی سند html رو میبندید اتفاق میفته . onresize - وقتی پنجره مرورگر رو تغییر اندازه میدید .

یک نمونه از فراخوانی رویداد رو پایین باهم میبینیم . در این نمونه برنامه وقتی روی متن داخل تگ <p> دابل کلیک کنید رنگ متن داخل تگ قرمز میشه :

 <p id="par"  ondblclick="document.getElementById('par').style.color='red';">This Text Color  Will Be Change After Double Click...</p> 

داخل کد یک رویداد میشه هرنوع کدی نوشت (تعریف متغییر , تعریف تابع و ....) توی کد پایین کد بالا رو ساخت یافته تر مینویسم :

 <p id="par" ondblclick="ChangeColor()">This Text Color  Will Be Change After Double Click...</p>
<script language="javascript" > 
function ChangeColor()
{
    document.getElementById('par').style.color='red';
}
</script>

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

 <html>
<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over  this text</h1>

</body>
</html> 

 

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

 <p name="MyParagraph" onclick="alert(this.name)">Click To  See This Tag Name Properteis</p> 

کد زیر رویدادی رو  اجرا میکنه که طی اون وقتی وارد یک فیلد فرم میشید رنگ پس زمینه اون فیلد عوض میشه :

 <html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the  background-color.</p>

</body>
</html> 

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

امیدوارم مفید بوده باشه  تاجلسه بعد در پناه حق ...


فایلهای ضمیمه
توجه! هیچ فایل ضمیمه ای برای این مطلب یافت نشد

نظرات شما نظر جدید