رویدادها در HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

HTML DOM به جاوا اسکریپت این اجازه را می‌دهد که به رویدادهای HTML واکنش داشته باشد:[۱]

Mouse Over Me
Thank You

واکنش به رویدادها (Events)

جاوا اسکریپت می‌تواند زمانی که یک رویداد رخ می‌دهد، همانند زمانی که کاربر روی یک عنصر HTML کلیک می‌کند، اجرا شود.

برای اجرا کردن کد جاوا اسکریپت در زمانی که کاربر روی یک عنصر کلیک می‌کند، کد جاوا اسکریپت را به خاصیت (attribute) رویداد در HTML اضافه کنید :

onclick=JavaScript

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

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

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

مثال

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>


مشاهدهٔ نتیجه


در این مثال، یک تابع از مدیریت کننده رویداد (event handler) فراخوانی می‌شود:

مثال

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>


مشاهدهٔ نتیجه


خاصیت های رویداد در HTML

برای مقدار دهی یک رویداد برای یک عنصر HTML شما می‌بایست از خاصیت‌های رویداد (event attribute) استفاده کنید.

مثال

اضافه کردن رویداد onclick یا کلیک روی یک عنصر دکمه:

<button onclick="displayDate()">Try it</button>


مشاهدهٔ نتیجه


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

مقدار دهی رویداد با استفاده از HTML DOM

HTML DOM به شما اجازه می‌دهد که رویدادهای عناصر HTML را با استفاده از جاوا اسکریپت مدیریت کنید:

مثال

اضافه کردن رویداد onclick یا کلیک روی یک عنصر دکمه:

1<script>
2document.getElementById("myBtn").onclick = displayDate;
3</script>


مشاهدهٔ نتیجه


در مثال بالا، یک تابع به نام displayDate برای رویداد یک عنصر HTML با شناسه یا id برابر با "myBtn" تنظیم شده‌است. ( id="myBtn" )

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

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

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

از رویداد onload می توان برای بررسی نوع و نسخه مرورگر بازدیدکننده استفاده کرد و بر اساس آن اطلاعات، نسخهٔ سازگار با آن اطلاعات را بارگذاری کرد.

از رویداد های onload و onunload می توان برای کار با کوکی‌ها استفاده کرد.

مثال

<body onload="checkCookies()">


مشاهدهٔ نتیجه


رویداد onchange

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

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

مثال

<input type="text" id="fname" onchange="upperCase()">


مشاهدهٔ نتیجه


رویدادهای onmouseover و onmouseout

رویداد onmouseover و onmouseout می‌توان برای اجرای تابعی برای زمانی که نشانه‌گر موس کاربر وارد یک عنصر یا خارج یک عنصر HTML می‌شود:

Mouse Over Me


مشاهدهٔ نتیجه


رویدادهای onmouseup, onmousedown و onclick

رویدادهای onmousedown ، onmouseup و onclick رویدادهایی هستند که بخشی از رویداد mouse-click محسوب می‌شود.

ابتدا زمانی که دکمه موس کلیک می‌شود، رویداد onmousedown اتفاق می‌افتد، سپس زمانی که دکمه mouse رها می‌شود رویداد onmouseup اتفاق می‌افتد، در نهایت زمانی که رویداد mouse-click به طور کامل اتفاق افتاد، رویداد onclick اتفاق می‌افتد.

Thank You


مشاهدهٔ نتیجه


مثال‌های بیشتر

onmousedown و onmouseup

تغییر یک تصویر در زمانی که کاربر دکمه موس را در حالت فشرده نگه می‌دارد.

onload

یک جعبه هشدار (alert box) را زمانی که بارگذاری صفحه به پایان رسید، نمایش می‌دهد.

onfocus

ویژگی رنگ پس زمینه (background-color) یک فیلد ورودی را زمانی که تمرکز کاربر روی آن بود (انتخاب شد) تغییر می‌دهد.

Mouse Events

رنگ یک عنصر را زمانی نشانه گار موس روی آن قرار می‌گیرد، تغییر می‌دهد.

مرجع شیء رویداد در HTML DOM (HTML DOM Event Object)

برای مشاهده لیست کاملی از رویدادهای HTML DOM به مقاله کامل ما تحت عنوان مرجع شیء رویداد (HTML DOM Event Object) نگاهی بیندازید.


منابع آموزشی