JavaScript Events

<< مبحث قبلی مبحث بعدی >>

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

رخدادهای HTML چیزهایی (things) هستند که برای عناصر HTML اتفاق می‌افتند.

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

رخدادهای HTML

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

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

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

قبل از ادامه بحث لازم است که با اصطلاح handler آشنا شویم.

handler: تابعی است که برای نوع بخصوصی از داده و یا تمرکز بر روی یک وظیفه خاص طراحی شده است. برای نمونه event handler: رخدادها و علامت‌های اطراف سیستم را دریافت و پردازش می‌کند.

در HTML این امکان وجود دارد که ویژگی event handler را با کد جاوا اسکریپت، به عناصر HTML اضافه کرد. این کار را می‌توان با علامت نقل قول ساده:

<element event='some JavaScript'>

و یا علامت نقل قول دوگانه انجام داد:

<element event="some JavaScript">

در مثال زیر، ویژگی onClick را همراه با کد جاوا اسکریپت، به عنصر <button> اضافه کرده‌ایم.


<!DOCTYPE HTML>
<html>
  <body>
    <button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
    <p id = "demo"> </p>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

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


<!DOCTYPE HTML>
<html>
  <body>
    <button onclick="this.innerHTML = Date()">The time is?</button>
    <p id = "demo"> </p>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

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


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript HTML Events </h2>
    <p> Click the button to display the date. </p>
    <button onclick="displayDate()"> The time is? </button>
    <p id="demo"> </button>
    <script>
      function displayDate() {
        document.getElementById("demo").innerHTML = Date();
      }
    </script>
  </body>
</html>

خروجی: روی دکمه زیر کلیک کنید.

JavaScript HTML Events

Click the button to display the date.

در زیر برخی از رخدادهای HTML پرکاربرد آورده شده است. جهت مشاهده لیست کامل اینجا را کلیک کنید.

رخداد توضیح
onchange یک عنصر HTML تغییر کرده است.
onclick کاربر یک عنصر HTML را کلیک کند.
onmouseover کاربر ماوس را روی یک عنصر HTML حرکت دهد.
onmouseout کاربر ماوس را از روی یک عنصر HTML دور کند.
onkeydown کاربر کلیدی از کیبورد را فشار دهد.
onload مرورگر بارگذاری صفحه را تمام کند.
در فصل HTML DOM بیشتر در مورد event handlers فرا خواهیم گرفت.
<< مبحث قبلی مبحث بعدی >>