رویدادها

Main Page Tutorial
موارد آموزشی
آموزش مقدمه اصول اولیه خروجی عبارات شیوهٔ نوشتن دستورات درج توضیحات متغیرها عملگرها عملگرهای ریاضی عملگرهای مقداردهی انواع داده‌ها توابع تعاریف شیء رویدادها رشته‌های متنی متدی برای داده‌های رشته‌ای اعداد متدی برای داده‌های عددی آرایه‌ها متدهای آرایه مرتب‌سازی آرایه‌ها متدهای پیمایش آرایه تاریخ و زمان فرمت‌های تاریخ متدهای دریافت تاریخ متدهای تنظیم تاریخ شیء ریاضی ایجاد عدد تصادفی مقادیر منطقی عملگرهای منطقی و مقایسه‌ای ساختار شرطی تکه کد Switch حلقهٔ For حلقهٔ While Break و Continue تبدیل نوع داده‌ها عملیات‌های بیتی عبارات با قاعده رخ دادن خطا Scope جا به جایی کدها استفاده از حالت سخت‌گیرانه کلمهٔ کلیدی This کلمهٔ کلیدی Let ثابت‌ها توابع به صورت پیکان کلاس‌ها اشکال‌زدایی راهنمای استایل بهترین تمرینات اشتباهات رایج کارایی کلمات رزرو شده نسخه‌ها نسخه ES5 نسخه ES6 JSON
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
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 خواهید آموخت.

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

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

صفحهٔ بعد»

«صفحهٔ قبل