این آموزش در تاریخ ۱۴۰۱/۰۳/۲۳ آپدیت شده است.
کار با رویدادها یا Events در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رویدادها یا Events در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با رویدادها یا Events در جاوااسکریپت
خب اصلا این رویدادها یعنی چی؟ ببینید دوستان ما یسری صفات در زبان HTML داریم که بهشون میگن رویداد یا Event ( یا یه چیزی که میتونه اتفاق بیوفته )
یعنی در اصل این رویدادها میشن همون صفت که میتونن داخل تگ استفاده شن و مال زبان HTML هستند ولی خب واکنشی که در صفحه نسبت به این رویدادها شکل میگیره توسط زبان جاوا اسکریپت ایجاد میشه.
البته اینجوری نیست که بگیم این رویدادها فقط و فقط میشه به عنوان صفت در زبان HTML ازشون استفاده کرد، نه ، چون ما میتونیم این رویدادهارو در زبان جاوااسکریپت هم تعریف و ازشون استفاده کنیم.
بفرض مثال من میخوام وقتی روی یه دکمه کلیک شد ، یه پیغام به من نشون بده و بگه سلام ، خب ما اینجا ۲ چیز نیاز داریم :
- خوده صفت رویداد ( که حالا یا با زبان HTML یا جاوااسکریپت ایجاد میشه )
- اون واکنشی که قراره توسط رویداد اجرا بشه ( با زبان جاوااسکریپت نوشته میشه )
مثال : وقتی بروی دکمه کلیک شد ، پیغام نشون میده ( سلام خوبی؟ )
|
1 2 3 4 5 |
<body> <button onclick="alert('سلام خوبی؟');">کلیک کن</button> </body> |
مثال شماره ۲ : وقتی صفحه لود شد، پیغام بده سلام خوبی؟
|
1 2 3 4 5 6 7 |
<body onload="alert('سلام به سایتم خوش اومدی');"> <h2>سایت آموزشی فری لرن</h2> <h2>سایت آموزشی فری لرن</h2> <h2>سایت آموزشی فری لرن</h2> </body> |
Free-Learn
نحوه ایجاد یک رویداد در عناصر HTML
خب ما گفتیم رویدادهارو میشه همانند یک صفت به تگ اضافه کرد، ولی خب اینجوری نیست که بگیم دیگه نمیشه در جاوااسکریپت خوده رویداد رو ایجاد کرد.
چندین روش برای تعریف رویدادها در تگ ها وجود داره که این روش ها بصورت زیر می باشند :
- روش اول » استفاده مستقیم از رویدادها در خوده تگ های HTML ( همانند مثال زیر )
یعنی بصورت دستی خودمون رویداد رو میزاریم داخل عنصر مورد نظرمون ، برای مثال در دستور زیر از رویداد onclick ( یعنی وقتی کلیک شد روش ) در یک دکمه استفاده کردیم.
|
1 2 3 4 5 |
<!-- h2 استفاده در تگ --> <h2 onclick="ShowMessage();">روی من کلیک کنی بازم رویداد اجرا میشه</h2> <!-- استفاده در یک دکمه --> <button onclick="ShowMessage();">کلیک کنید</button> |
- روش دوم » تعریف رویداد از طریق جاوااسکریپت ( روش اول )
تو این روش ما میتونیم با استفاده از متد addEventListener از داخل دستورات جاوااسکریپت رویداد مورد نظرمون رو برای تگ مورد نظر مشخص کنیم.
|
1 2 3 4 5 6 7 8 9 10 |
<script> var MyButton = document.getElementById("MyBTN"); MyButton.addEventListener("click",ShowMessage); function ShowMessage(){ alert("سایت آموزشی فری لرن"); } </script> |
- روش سوم » تعریف رویداد از طریق جاوااسکریپت ( روش دوم )
تو این روش میتونیم بصورت مستقیم با استفاده از جاوااسکریپت رویدادمون رو درون یک عنصر خاص تعریف نماییم.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var MyButton = document.getElementById("MyBTN"); MyButton.onclick = function(){ ShowMessage(); }; function ShowMessage(){ alert("سایت آموزشی فری لرن"); } </script> |
Free-Learn
برخی از رویدادهای پرکاربرد HTML
همونطور که دیدید در مثال های بالا من از رویدادهای onclick و onload استفاده کردم، خب این فقط ۲تا از رویدادها بودش .
در جدول زیر لیستی از پرکاربردترین رویدادهارو میتونید مشاهده نمایید :
پیشنهاد میکنم لیست کامل رویدادهای عمومی زبان HTML را مشاهده نمایید.
| نام رویداد | توضیح |
|---|---|
| onclick | وقتی روی چیزی کلیک شد |
| onchange | وقتی محتوای یه چیزی تغییر کنه |
| onmouseover | وقتی ماوس میره روی یه چیزی |
| onmouseout | وقتی ماوس از روی چیزی خارج شه |
| onkeydown | وقتی یه دکمه از صفحه کلید فشار داده بشه |
| onload | وقتی صفحه بطور کامل لود بشه |
Free-Learn
مثال های بیشتر
در ادامه میخوام چندین مثال کاربردی باهمدیگه در رابطه با رویدادها در جاوااسکریپت داشته باشیم، لطفا در ادامه با من همراه باشید.
مثال شماره ۱ : استفاده از رویداد OnMouseOver ( میخوایم وقتی ماوس رفت روی تصویر، تصویر عوض شه )
|
1 2 3 |
<div> <img src="..." onmouseover="ChangePicture();"> </div> |
مثال شماره ۲ : استفاده از رویداد onchange ( برای وقتی محتوای یه عنصر تغییر کند )
|
1 2 3 |
<select onchange="ChangeText();"> ... </select> |
مثال شماره ۳ : استفاده از رویداد onsubmit ( برای وقتی بروی دکمه submit یا دکمه ارسال در فرم کلیک شود ) – میخوایم کاری کنیم که اگه فیلدهای موجود در فرم خالی بودن یه پیغام بده و بگه باید فیلد تکمیل شود.
|
1 2 3 |
<form action="#" onsubmit="return Check();"> ... </form> |
