آموزش رخدادادها event در جاوا اسکریپت

سلام دوستان گرامیف حالتون که خوبه ؟ امیدوارم که همیشه شاد باشید.در مورد رخدادادها در جاوا اسکریپت-JavaScript میخواهم مطلبی بگذارم.در HTML رخدادها، اتفاقاتی هستند که برای عناصر (HTML) روی می دهند.

هنگامی که از جاوا اسکریپت در صفحات HTML استفاده می کنید، جاوا اسکریپت به محض اجرای (روی دادن) رخدادها واکنش نشان می دهند.

رخدادهای HTML

رخداد HTML ممکن است چیزی باشد که هم از طرف مرورگر و هم از طرف کاربر روی می دهد.

نمونه هایی از رخدادهای HTML به ترتیب زیر می باشند.

بار گذاری یک صفحه ی وب HTMLبه پایان رسیده

یکی از فیلدهای ورودی (input field) HTML تغییر یافته یا اصلاح شده

یک دکمه ی HTML روی صفحه کلیک شده

اغلب پس از اینکه رویدادی (event) رخ می دهد، عملیات خاصی را می خواهیم پیاده کنیم.

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

HTML به خصیصه های event handler (کنترل گر و مدیریت کننده ی رخداد ها) که به کد جاوا اسکریپت (javascript code) الحاق شده اند اجازه ی متصل یا ضمیمه شدن به عناصر HTML را می دهد.

با تک کوتیشن (‘ ‘)

‎

با دابل کوتیشن (” “)

‎

در مثال زیر خصیصه (attribute) onClick (به همراه کد)، به المان دکمه (تگ ) افزوده می شود.

مثال

نمونه یک
?
۱

The time is?
‎

همان طور که در مثال بالا مشاهده می کنید، کد جاوا اسکریپت محتوای المان مربوط را به وسیله ی شناسه ی “demo” تغییر می دهد.

حال توجه خود را به نمونه ی بعدی جلب کنید که در آن کد محتوای المان خود را با استفاده از this.innerHTML تغییر می دهد.

مثال

نمونه دو
?
۱

The time is?
‎‏ ‏

نکته

کد جاوا اسکریپت معمولا چندین خط ادامه دارد. رایج تر این است (بیشتر می بینید) که خصیصه ی رخدادها (event attribute) توابع را فراخوانی کنند.

مثال

نمونه سه
?
۱
۲
۳
۴
۵

function displayDate() {
document.getElementById(“demo”).innerHTML = Date();
}

‎

رخدادهای معمول و پرکاربرد HTML

Event / رخداد

شرح

onchange

با وقوع این رخداد یک المان HTML تغییر یافته

onclick

در این حالت کاربر روی عنصر HTML کلیک کرده

onmouseover

زمانی روی می دهد که کاربر اشاره گر موس را روی یک المان HTML قرار دهد

onmouseout

هنگامی رخ می دهد که کاربر مکان نمای موس را از روی عنصر HTML برداشته باشد

onkeydown

کاربر یکی از دکمه های صفحه کلید را فشار می دهد، این رخداد راه اندازی و اجرا می شود

onload

زمانی اجرا می شود که مرورگر بارگذاری صفحه را به پایان رسانده

جاوا اسکریپت چه نقشی را ایفا می کند؟

Event handler ها (اداره کننده ی رخدادها) به منظور کنترل، بررسی، تایید درستی ورودی کاربر (user input) و عملیاتی که توسط کاربر انجام می شود و همچنین عملیات مرورگر مورد استفاده قرار می گیرد.

کارهایی که باید با هر بار بارگذاری صفحه، انجام شود.

کارهایی که باید با بسته شدن صفحه / هنگامی که صفحه بسته می شود، انجام گیرد.

عملیاتی که باید پس از اینکه کاربر یک دکمه را فشار داد، پیاده شوند.

محتوا (content) که باید به هنگام وارد شدن داده توسط کاربر، بررسی و تایید درستی شود و غیره…..

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

خصیصه های رخداد HTML خود می توانند (به طور) مستقیم کد جاوا اسکریپت را اجرا کنند.

خصیصه های رخداد HTML می توانند توابع جاوا اسکریپت را صدا بزنند.(فراخوانی کنند)

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

برنامه نویس می تواند از ارسال، مدیریت و دستکاری رخدادها جلوگیری کند و غیره…..