سبد (0)

رویدادها در JavaScript

مدل DOM به JavaScript اجازه می دهد تا به رویدادهای یک صفحه HTML، واکنش نشان دهد.

مثال (رویدادها در JavaScript)

Mouse Over Me
Click Me

واکنش به رویدادها

Wiki

یک کد JavaScript می تواند زمانی که یک رویداد اتفاق می افتد، اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک کند.

برای اجرای شدن کد JavaScript به ازای یک رویداد، باید کد مورد نظر را در خصوصیت مربوط به همان رویداد نوشت:

onclick=JavaScript

مثالی از رویدادها:

  • با كلیك موس
  • زمانی كه یك صفحه یا یك عكس بارگذاری می شود
  • موس بر روی یك نقطه خاص بر روی صفحه برود
  • انتخاب كردن یك فیلد ورودی در فرم HTML
  • ارسال یك فرم HTML
  • فشردن یک کلید کیبورد

توجه: معمولاً رویدادها در تركیب با توابع استفاده می شوند و قبل از آنكه رویداد اتفاق بیافتد، تابع اجرا نخواهد شد.

در مثال زیر، زمانی که کاربر روی متن کلیک کند، محتوای عنصر <h1> تغییر می کند:

مثال (رویدادها در JavaScript)

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
خودتان امتحان کنید »

در مثال زیر، زمانی که کاربر روی متن کلیک کند، تابع changetext فراخوانی می شود:

مثال (رویدادها در JavaScript)

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
خودتان امتحان کنید »

اختصاص رویدادها به عناصر

Wiki

برای اختصاص دادن رویدادها به عناصر HTML، باید از نام خصوصیت های مربوط به همان رویداد استفاده نمود.

مثال (رویدادها در JavaScript)

اختصاص خصوصیت onclick به عنصر button

<button onclick="displayDate()">Try it</button>
خودتان امتحان کنید »

در مثال بالا، زمانی که کاربر روی دکمه کلیک نماید، تابع displayDate فراخوانی می شود.


اختصاص رویدادها با استفاده از مدل DOM

Wiki

مدل DOM به شما اجازه می دهد تا رویدادها را به صورت داینامیک به عناصر HTML اختصاص دهید:

مثال (رویدادها در JavaScript)

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
خودتان امتحان کنید »

در مثال بالا، به ازای رویداد onclick عنصر با شناسه "myBtn"، تابع displayDate فراخوانی می شود. (زمانی که روی عنصر کلیک شود تابع فراخوانی می شود)


رویدادهای onload و onunload

Wiki

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

رویداد onload معمولا برای چك كردن نوع و نسخه مرورگر بیننده استفاده می شود و بر اساس اطلاعات بدست آمده یک نسخه مناسب از صفحه وب را بارگذاری می کند.

همچنین هر دو رویداد معمولا برای تنظیم كوكی ها، موقعی كه كاربر وارد صفحه می شود و یا آنرا ترك می كند، استفاده می شود. برای مثال شما می توانید یك پنجره popup برای درخواست نام كاربر به محض اولین ورود به صفحه داشته باشید. اسم مورد نظر در داخل كوكی ذخیره می شود. دفعه ی بعد كه بیننده وارد صفحه ی شما می شود می توانید یك پنجره popup جدید مانند "آقای احمدی خوش آمدید" را داشته باشید.

مثال (رویدادها در JavaScript)

<body onload="checkCookies()">
خودتان امتحان کنید »

رویدادهای onFocus ، onBlur و onChange

Wiki

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

onBlur: هنگامیکه تمرکز از روی یکی از اجزای فرم خارج شود.

onfocus: هنگامیکه توسط موس و یا دکمه Tab کیبورد بر روی یکی از اجزای فرم تمرکز شود.

onchange: هنگامی که در اجزای فرم تغییر ایجاد شود، مانند زمانی که متن داخل یک کادر متنی تغییر یابد.

مثال زیر چگونگی استفاده از رویداد onchange را نشان می دهد. زمانی كه كاربر محتوای کادر متنی را تغییر دهد، تابع ()upperCase فراخوانی می شود:

مثال (رویدادها در JavaScript)

<input type="text" id="fname" onchange="upperCase()">
خودتان امتحان کنید »

رویداد onmouseover و onmouseout

Wiki

رویداد onmouseover و onmouseout می تواند زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد و یا از روی آن خارج می شود، یک تابع را راه اندازی کند.

در مثال ساده زیر، زمانی که موس روی کادر قرمز رنگ قرار می گیرد (onmouseover)، متن آن تغییر می کند و زمانی که موس از روی آن کنار می رود (onmouseout)، به حالت اول برمی گردد:

مثال (رویدادها در JavaScript)

Mouse Over Me
خودتان امتحان کنید »

 رویداد onmousedown و onmouseup و onclick

Wiki

onmousedown: زمانی که دکمه موس، فشار داده می شود.

onmouseup: زمانی که دکمه موس، رها می شود.

onclick: زمانی که عملیات کلیک کردن موس، کامل می شود.

مثال (رویدادها در JavaScript)

یک مثال ساده از رویدادهای onmousedown و onmouseup

Click Me
خودتان امتحان کنید »

رویداد onSubmit

Wiki

رویداد onsubmit معمولاً برای اعتبارسنجی همه ی فیلدها یک فرم، قبل از ارسال به سرور استفاده می شود.

در مثال زیر چگونگی استفاده از این رویداد نشان داده شده است. تابع ()checkForm زمانی كه كاربر دكمه ای از فرم را فشار می دهد فراخوانی می شود. اگر مقادیر فیلدها پذیرفته نشود، ارسال صفحه به سرور متوقف می شود، تابع ()checkForm مقدار True و یا False  را بر می گرداند. اگر مقدار True را برگرداند صفحه ارسال می شود، در غیر این صورت ارسال صفحه متوقف خواهد شد:

<form method="post" action="test.htm" onsubmit="return checkForm()">

مثال های بیشر

onmousedown and onmouseup
زمانی که کاربر دکمه موس را پایین نگه می دارد، خصوصیت src عنصر <img> تغییر می کند.

onload
نمایش یک پیغام، زمانی که بارگذاری صفحه تمام شود.

onfocus
زمانی که موس روی عنصر <input> قرار گرفت (focus)، رنگ پس زمینه آن عوض می شود.

Mouse Events
زمانی که موس روی عنصر حرکت می کند، رنگ آن تغییر می کند.

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه