رویدادها در جاوا اسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

رویداد HTML "چیزهایی" هستند که برای عناصر HTML ای اتفاق می‌افتد. [۱]

زمانیکه شما از جاوا اسکریپت درون صفحات HTML استفاده می‌کنید، جاوا اسکریپت می‌تواند به این رویدادها "واکنش" نشان دهد.

رویدادها در HTML

یک رویداد در HTML می‌تواند کاری باشد که مرورگر انجام می‌دهد یا کاری باشد که یک کاربر انجام می‌دهد.

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

  • زمانیکه بارگذاری یک صفحه HTML به طور کامل به پایان می‌رسد
  • زمانیکه یک مقدار فیلد ورود داده (به انگلیسی: input field) تغییر می‌کند
  • زمانیکه بر روی یک دکمه HTML ای کلیک می‌شود

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

جاوا اسکریپت به شما این اجازه را می‌دهد که کدهای خود را زمانیکه رویدادهای مد نظر شما اتفاق افتاد، اجرا کنید.

زبان HTML به شما اجازه می‌دهد که به وسیلهٔ کدهای جاوا اسکریپت و خاصیت‌هایی برای مدیریت رویداد (به انگلیسی: event handler) که در HTML وجود دارند، رویدادهای عناصر مختلف را مدیریت کنید:

با علامت تک کوتیشن «'»:

<element event='some JavaScript'>

با دو کوتیشن «"»:

<element event="some JavaScript">

در مثال زیر، ویژگیonclick(با کد)، به یک عنصر<button>در HTML اضافه شده‌است:

مثال

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

در مثال بالا، کد جاوا اسکریپت محتوای عنصر را که id (به فارسی: شناسه) آن برابر با کلمهٔ "demo" است را تغییر می‌دهد.

در مثال بعدی، کد ما محتوای عنصر HTML مربوط به خود را (با استفاده از دستورthis.innerHTML) تغییر می‌دهد:

مثال

<button onclick="this.innerHTML = Date()">The time is?</button>
کدهای جاوا اسکریپت معمولاً طولانی بوده و در چندین خط نوشته می‌شوند. فراخوانی توابع در attributes (به فارسی: خاصیت) event (به فارسی: رویداد) عنصر بسیار روش مناسبتری است:

مثال

<button onclick="displayDate()">The time is?</button>

رویدادهای پر استفادهٔ HTML

در اینجا می‌توانید لیستی از رویدادهای پر استفاده در HTML را ببینید:

توضیحات رویداد
زمانیکه محتوای یک عنصر HTML تغییر می‌کند. Onchange
زمانیکه کاربر بر روی یک عنصر HTML کلیک می‌کند. Onclick
زمانیکه کاربر موس خود را روی یک عنصر HTML می‌برد. Onmouseover
زمانیکه کاربر موس خود را از محدوده یک عنصر HTML خارج می‌کند. Onmouseout
زمانیکه کاربر یک کلید از کیبرد را می‌فشارد. Onkeydown
زمانیکه بارگذاری صفحه به طور کامل پایان می‌پذیرد. Onload

لیست مرجع وب سایت wikicod.ir در مورد رویدادهای HTML DOM در جاوا اسکریپت بسیار طولانی‌تر است.

جاوا اسکریپت چه کاری می‌تواند انجام دهد؟

رویدادها می‌توانند برای مدیریت و بررسی صحت و سقم مواردی همچون: داده‌ای که کاربر به عنوان ورودی وارد می‌کند، کارهایی که کاربر و مرورگر انجام می‌دهند استفاده شوند:

  • کارهایی که باید هر دفعه که صفحه بارگذاری شد، انجام شوند
  • کارهایی که می‌بایست زمانیکه صفحه بسته شد، انجام شوند
  • عملی که می‌بایست زمانیکه کاربر روی یک دکمه کلیک می‌کند انجام شود
  • محتوایی که می‌بایست زمانیکه کاربر دادهٔ ورودی خود را وارد می‌کند، بررسی شود
  • و …

روشهای گوناگونی می‌توانند استفاده شوند تا به جاوا اسکریپت این اجازه را بدهد که با رویدادها کار کند:

  • خاصیت (به انگلیسی: attributes)، رویداد (به انگلیسی: event) در HTML می‌تواند کدهای جاوا اسکریپت را به صورت مستقیم اجرا کند
  • ویژگی رویداد (به انگلیسی: event) در HTML می‌تواند توابع جاوا اسکریپت را فراخوانی کند
  • شما می‌توانید مدیریت‌کنندهٔ رویداد (به انگلیسی: event handler) خود را به عناصر HTML اضافه کنید
  • شما می‌توانید از رخ‌دادن رویدادها یا مدیریت آن‌ها جلوگیری کنید
  • و …

شما مطالب بیشتری را در مورد رویدادها و مدیریت‌کنندهٔ رویدادها در فصل HTML DOM خواهید آموخت.

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


منابع آموزشی