رویدادهای JavaScript

رویدادهای HTML "رویدادی" هستند که در عناصر HTML رخ می‌دهند.

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

رویدادهای HTML

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

در زیر چند مثال از رویدادهای HTML آورده شده است:

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

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

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

با استفاده از کد JavaScript، HTML به شما اجازه می‌دهد تا رویدادهای پردازشگر به عناصر HTML اضافه کنید.

با استفاده از نقل‌قول‌های یکگانه:

<عنصر رویداد='بعضی از JavaScript>

با استفاده از نقل‌قول‌های دوگانه:

<عنصر رویداد="بعضی از JavaScript">

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

مثال

<button onclick='document.getElementById("demo").innerHTML=Date()'>زمان حال چیست؟</button>

آزمایش کنید

در مثال بالا، کد JavaScript محتوای عنصر با id="demo" را تغییر داد.

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

مثال

<button onclick="this.innerHTML=Date()">زمان حال چیست؟</button>

آزمایش کنید

کد JavaScript معمولاً دارای چندین خط است. استفاده از توابع فراخوانی ویژگی رویداد بیشتر است:

مثال

<button onclick="displayDate()">زمان حال چیست؟</button>

آزمایش کنید

رویدادهای معمول HTML

در زیر چند رویداد معمول HTML آورده شده است:

رویداد توضیح
onchange عنصر HTML تغییر کرده است
onclick کاربر روی عنصر HTML کلیک کرده است
onmouseover موس کاربر به روی عنصر HTML حرکت کرده است
onmouseout موس کاربر از عنصر HTML خارج شده است
onkeydown کلیدهای صفحه کلید کاربر فشرده شده‌اند
onload صفحه بارگذاری شده است

لیست کامل‌تر:منوی مرجع JavaScript و HTML DOM CodeW3C.com.

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

برنامه‌های رویداد می‌توانند برای پردازش، تأیید ورود کاربر، عمل کاربر و عمل مرورگر استفاده شوند:

  • کاری که باید در هنگام بارگذاری صفحه انجام شود
  • کاری که باید در هنگام بستن صفحه انجام شود
  • عملی که باید در هنگام کلیک کاربر انجام شود
  • محتوایی که باید در هنگام ورود کاربر به عنوان داده‌ها تأیید شود
  • و دیگر...

روش‌های مختلفی برای پردازش رویداد با JavaScript وجود دارد:

  • ویژگی‌های رویداد HTML می‌توانند کد JavaScript را اجرا کنند
  • ویژگی‌های رویداد HTML می‌توانند تابع‌های JavaScript را فراخوانی کنند
  • شما می‌توانید یک تابع پردازش رویداد خودکار به عناصر HTML اختصاص دهید
  • شما می‌توانید از ارسال یا پردازش رویداد جلوگیری کنید
  • و دیگر...

شما در فصل HTML DOM بیشتر درباره رویدادها و برنامه‌های رویدادها یاد خواهید گرفت.