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

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


رویدادها

رویداد های HTML اتفاق هایی هستند که برای عناصر HTML رخ می‌دهد. وقتی جاوا اسکریپت در صفحات HTML استفاده میشود میتواند رویدادها را فراخوانی کند.


رویداد های HTML

یک رویداد HTML می تواند چیزی باشد که مرورگر و یا کاربر انجام می دهند. در زیر چندین مثال از رویدادهای HTML آمده است :

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

اغلب وقتی رویدادی اتفاق می افتد ممکن است بخواهید کاری انجام شود. جاوا اسکریپت به شما این امکان را می دهد که وقتی رویدادی اتفاق افتاد، کدی را اجرا کنید. جاوااسکریپت اجازه می دهد که مشخصه های رویداد به عناصر HTML اضافه شوند. قاعده نوشتاری آن با استفاده از سینگل کوتیشن ('')  به شکل زیر است :

<element event='some JavaScript'>

همچنین می توان قاعده نوشتاری بالا را با استفاده از دابل کوتیشن ("") به صورت زیر پیاده سازی کرد :

<element event="some JavaScript">

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

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

<p id="demo"></p>

در نمونه مثال بالا زمانی که بر روی دکمه کلیک می شود محتوای عنصری با شناسه "id="demo تغییر خواهد کرد. در نمونه مثال بعدی کد مورد نظر محتوای عنصر خود را تغییر میدهد :

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

نکته : معمولا کدهای جاوا اسکریپت در چندین خط نوشته می شوند و بهتر است مشخصه  رویداد در عناصر HTML توابع را فراخوانی کنند :

 

<p>Click the button to display the date.</p>

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

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

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

برخی از رویدادهای  رایج در لیست زیر آمده اند :

  • onchange : زمانی که عنصر مورد نظر تغییر کند، فراخوانی میشود.
  • onclick : زمانی که بر روی عنصر مورد نظر کلیک شود، فراخوانی میشود.
  • onmouseover : زمانی که نشانگر موس بر روی عنصر مورد نظر قرار بگیرد، فراخوانی میشود.
  • onmouseout : زمانی که نشانگر موس از محدوده عنصر مورد نظر خارج شود، فراخوانی میشود.
  • onkeydown : زمانی که کاربر دکمه ای از صفحه کلید را فشار میدهد، رخ میدهد.
  • onload : زمانی که بارگذاری صفحه در مرورگر به پایان میرسد، رخ میدهد.
منتشر شده در ۸ آذر ۱۳۹۷ حمید رضا ملکی ۱۲۲ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید