رویدادها در JavaScript
مدل DOM به JavaScript اجازه می دهد تا به رویدادهای یک صفحه HTML، واکنش نشان دهد.
مثال (رویدادها در JavaScript)
واکنش به رویدادها
یک کد JavaScript می تواند زمانی که یک رویداد اتفاق می افتد، اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک کند.
برای اجرای شدن کد JavaScript به ازای یک رویداد، باید کد مورد نظر را در خصوصیت مربوط به همان رویداد نوشت:
مثالی از رویدادها:
-
با كلیك موس
-
زمانی كه یك صفحه یا یك عكس بارگذاری می شود
-
موس بر روی یك نقطه خاص بر روی صفحه برود
-
انتخاب كردن یك فیلد ورودی در فرم HTML
-
ارسال یك فرم HTML
-
فشردن یک کلید کیبورد
توجه: معمولاً رویدادها در تركیب با توابع استفاده می شوند و قبل از آنكه رویداد اتفاق بیافتد، تابع اجرا نخواهد شد.
در مثال زیر، زمانی که کاربر روی متن کلیک کند، محتوای عنصر <h1> تغییر می کند:
مثال (رویدادها در JavaScript)
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
در مثال زیر، زمانی که کاربر روی متن کلیک کند، تابع changetext فراخوانی می شود:
مثال (رویدادها در JavaScript)
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
اختصاص رویدادها به عناصر
برای اختصاص دادن رویدادها به عناصر HTML، باید از نام خصوصیت های مربوط به همان رویداد استفاده نمود.
مثال (رویدادها در JavaScript)
اختصاص خصوصیت onclick به عنصر button
در مثال بالا، زمانی که کاربر روی دکمه کلیک نماید، تابع displayDate فراخوانی می شود.
اختصاص رویدادها با استفاده از مدل DOM
مدل DOM به شما اجازه می دهد تا رویدادها را به صورت داینامیک به عناصر HTML اختصاص دهید:
مثال (رویدادها در JavaScript)
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
در مثال بالا، به ازای رویداد onclick عنصر با شناسه "myBtn"، تابع displayDate فراخوانی می شود. (زمانی که روی عنصر کلیک شود تابع فراخوانی می شود)
رویدادهای onload و onunload
onload رویدادی است که با ورود کاربر به صفحه راه اندازی می شود و onunload زمانی که از آن خارج می شود.
رویداد onload معمولا برای چك كردن نوع و نسخه مرورگر بیننده استفاده می شود و بر اساس اطلاعات بدست آمده یک نسخه مناسب از صفحه وب را بارگذاری می کند.
همچنین هر دو رویداد معمولا برای تنظیم كوكی ها، موقعی كه كاربر وارد صفحه می شود و یا آنرا ترك می كند، استفاده می شود. برای مثال شما می توانید یك پنجره popup برای درخواست نام كاربر به محض اولین ورود به صفحه داشته باشید. اسم مورد نظر در داخل كوكی ذخیره می شود. دفعه ی بعد كه بیننده وارد صفحه ی شما می شود می توانید یك پنجره popup جدید مانند "آقای احمدی خوش آمدید" را داشته باشید.
رویدادهای onFocus ، onBlur و onChange
این سه رویداد اغلب برای اعتبارسنجی فرم ها استفاده می شوند.
onBlur: هنگامیکه تمرکز از روی یکی از اجزای فرم خارج شود.
onfocus: هنگامیکه توسط موس و یا دکمه Tab کیبورد بر روی یکی از اجزای فرم تمرکز شود.
onchange: هنگامی که در اجزای فرم تغییر ایجاد شود، مانند زمانی که متن داخل یک کادر متنی تغییر یابد.
مثال زیر چگونگی استفاده از رویداد onchange را نشان می دهد. زمانی كه كاربر محتوای کادر متنی را تغییر دهد، تابع ()upperCase فراخوانی می شود:
مثال (رویدادها در JavaScript)
رویداد onmouseover و onmouseout
رویداد onmouseover و onmouseout می تواند زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد و یا از روی آن خارج می شود، یک تابع را راه اندازی کند.
در مثال ساده زیر، زمانی که موس روی کادر قرمز رنگ قرار می گیرد (onmouseover)، متن آن تغییر می کند و زمانی که موس از روی آن کنار می رود (onmouseout)، به حالت اول برمی گردد:
رویداد onmousedown و onmouseup و onclick
onmousedown: زمانی که دکمه موس، فشار داده می شود.
onmouseup: زمانی که دکمه موس، رها می شود.
onclick: زمانی که عملیات کلیک کردن موس، کامل می شود.
مثال (رویدادها در JavaScript)
یک مثال ساده از رویدادهای onmousedown و onmouseup
رویداد onSubmit
رویداد onsubmit معمولاً برای اعتبارسنجی همه ی فیلدها یک فرم، قبل از ارسال به سرور استفاده می شود.
در مثال زیر چگونگی استفاده از این رویداد نشان داده شده است. تابع ()checkForm زمانی كه كاربر دكمه ای از فرم را فشار می دهد فراخوانی می شود. اگر مقادیر فیلدها پذیرفته نشود، ارسال صفحه به سرور متوقف می شود، تابع ()checkForm مقدار True و یا False را بر می گرداند. اگر مقدار True را برگرداند صفحه ارسال می شود، در غیر این صورت ارسال صفحه متوقف خواهد شد:
مثال های بیشر
onmousedown and onmouseup
زمانی که کاربر دکمه موس را پایین نگه می دارد، خصوصیت src عنصر <img> تغییر می کند.
onload
نمایش یک پیغام، زمانی که بارگذاری صفحه تمام شود.
onfocus
زمانی که موس روی عنصر <input> قرار گرفت (focus)، رنگ پس زمینه آن عوض می شود.
Mouse Events
زمانی که موس روی عنصر حرکت می کند، رنگ آن تغییر می کند.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 33855