JavaScript Events

HTML Events رویدادهایی است که برای المان های HTML رخ می دهد.

وقتی از جاوااسکریپت برای طراحی سایت استفاده می شود ، جاوااسکریپت می تواند به آن رویدادها واکنش نشان دهد.

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

مثالي از event  ها:

  • كليك موس
  • زماني كه يك صفحه يا يك عكس بارگذاري مي شود
  • موس بر روي يك نقطه خاص بر روي صفحه برود
  • انتخاب كردن يك فيلد ورودي در فرم HTML
  • فرستادن يك فرم HTML
  • يك بار كليك كردن

اغلب وقتی طراحی سایت انجام می دهیم نیاز داریم وقتی یک رویداد اتفاق افتاد کاری انجام شود. برای این مهم JavaScript به شما اجازه می دهد وقتی event رخ داد کدی را اجرا کنید.

HTML اجازه می دهد مشخصه های event handler همراه با کد جاوااسکریپت به المان های HTML اضافه شود.

<some-HTML-element some-event='some JavaScript'>

در مثال بعدی یک مشخصه onclick همراه با کد به یک المان کلید اضافه شده است:

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

در مثال بالا کد JavaScript مقدار المان با ” id=”demo را تغییر می دهد.

در مثال بعدی کد JavaScript مقدار خود المان اصلی را توسط دستور this.innerHTML تغییر می دهد:

<button 
onclick='this.innerHTML=Date()'>The time is?</button>

معمولا کدهایی که در طراحی وب سایت استفاده می شوند بیشتر از یک خط است و بهتر است در این مواقع یک تابع فرخوانی شود:

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

توجه کنید که در مثال قبل تابع displayDate به محض رخ دادن رویداد click فراخوانی خواهد شد.

و نکته دیگر مثال اینکه به جای ‘ از ” استفاده شد.

رویدادهای رایج HTML

در ادامه فهرستی از بعضی رویدادهای رایج HTML که در طراحی سایت استفاده می شوند نمایش داده شده است:

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

این لیست بسیار طولانی تر از آن است که می بینید برای کسب اطلاعات بیشتر به مرجع HTML DOM مراجعه نمایید.

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

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

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

روش های مختلفی برای اینکه JavaScript بتواند با رویدادها کار کند قابل استفاده است:

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

شما ممکن است این را هم بپسندید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *