رویدادها (Events)
اینجا با «رویدادهای جاوااسکریپت» آشنا می شویم. «رویداد (Event)» یعنی اتفاقی روی عنصر. مثلاً کلیک کاربر یا پایان لود صفحه. جاوااسکریپت می تواند به این اتفاق ها واکنش نشان دهد.
رویداد یعنی چه؟
رویداد می تواند کار مرورگر یا کار کاربر باشد. سپس با کد، پاسخ می دهیم. این پاسخ را «مدیریت رویداد (Event Handling)» می گویند.
رویداد در HTML چگونه وصل می شود؟
در HTML می توان ویژگی رویداد مثل onclick نوشت. داخلش کد جاوااسکریپت می آید. با تک گفته یا دوتا گفته هم فرقی ندارد.
مثال: تغییر محتوای یک عنصر
دکمه کلیک می شود، متن عنصر «demo» برابر زمان می شود.
document.getElementById('demo').innerHTML = Date();
مثال: تغییر متن همان دکمه با this
این بار خود دکمه هدف است. متن خودش زمان می شود.
this.innerHTML = Date();
مثال: صدا زدن یک تابع
گاهی کد طولانی است. پس فقط تابع را صدا می زنیم.
displayDate();
رویدادهای رایج
چند رویداد پرکاربرد را بشناسیم. سپس در پروژه استفاده کنیم.
- onload: صفحه کامل لود شده است.
- onclick: روی عنصر کلیک شده است.
- onchange: مقدار ورودی تغییر کرده است.
- onmouseover: نشانگر روی عنصر رفته است.
- onmouseout: نشانگر از عنصر بیرون رفته است.
- onkeydown: کلید صفحه کلید فشرده شده است.
گام های عملی
- یک دکمه در HTML بساز.
- ویژگی onclick را به دکمه بده.
- کدی کوتاه یا یک تابع را صدا بزن.
جمع بندی سریع
- رویداد، اتفاق روی عنصر است.
- مدیریت رویداد یعنی واکنش با کد.
- می توان کد مستقیم نوشت.
- یا فقط تابع را صدا زد.
برای تسلط بیشتر، اشکال زدایی جاوااسکریپت را بخوان. همچنین صفحه دستورات خطا برای مدیریت خطاست.
نکته: فهرست کامل رویدادهای DOM را در مرجع مشاهده کن. منابع: JavaScript Events و HTML DOM Events Reference.