رویدادهای JavaScript HTML DOM

HTML DOM اجازه می‌دهد JavaScript به رویدادهای HTML واکنش نشان دهد:

ماوس بالا می‌آید!
کلیک کنید

واکنش به رویداد

JavaScript می‌تواند در زمان وقوع رویداد اجرا شود، به عنوان مثال، وقتی کاربر بر روی یک عنصر HTML کلیک می‌کند.

برای اجرای کد در هنگام کلیک کاربر بر روی یک عنصر، کد JavaScript را به ویژگی رویدادهای HTML اضافه کنید:

onclick=JavaScript

مثال رویدادهای HTML:

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

در این مثال، وقتی کاربر روی <h1> محتوای آن تغییر می‌کند:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">روی این متن کلیک کنید!</h1>
</body>
</html>

آزمایش کنید

در این مثال، از تابع در رویداد پردازشگر استفاده می‌شود:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">روی این متن کلیک کنید!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

آزمایش کنید

ویژگی رویداد HTML

برای نسبت دادن رویداد به عنصر HTML، شما می‌توانید از ویژگی رویداد استفاده کنید.

مثال

برای نسبت دادن به عنصر دکمه onclick رویداد:

<button onclick="displayDate()">آموزش</button>

آزمایش کنید

در مثال بالا، تابع displayDate هنگام کلیک روی دکمه اجرا می‌شود.

نسبت دادن رویداد با استفاده از DOM HTML

DOM HTML اجازه می‌دهد تا با استفاده از JavaScript به عناصر HTML رویدادها را نسبت دهید:

مثال

برای تعیین دکمه، onclick رویداد:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

آزمایش کنید

در مثال بالا، تابع displayDate به عنصر HTML با id="myBtn" نسبت داده شده است.

وقتی روی دکمه کلیک می‌شود، تابع اجرا می‌شود.

رویدادهای onload و onunload

وقتی کاربر به صفحه وارد می‌شود و از آن خارج می‌شود، onload و رویداد onunload رویداد.

onload رویدادها می‌توانند برای تشخیص نوع و نسخه مرورگر بازدیدکننده و سپس بارگذاری نسخه مناسب صفحه بر اساس این اطلاعات استفاده شوند.

onload و رویداد onunload رویدادها می‌توانند برای مدیریت کوکی‌ها استفاده شوند.

مثال

<body onload="checkCookies()">

آزمایش کنید

رویداد onchange

رویداد onchange رویدادها معمولاً با تأیید فیلدهای ورودی ترکیب می‌شوند.

در اینجا نحوه استفاده از رویداد onchange این مثال نشان می‌دهد که وقتی کاربر محتوای فیلد ورودی را تغییر می‌دهد، تابع upperCase() فراخوانی می‌شود.

مثال

<input type="text" id="fname" onchange="upperCase()">

آزمایش کنید

رویدادهای onmouseover و onmouseout

onmouseover و onmouseout این رویدادها می‌توانند برای فعال کردن یک تابع در هنگام جابجایی ماوس کاربر به روی عنصر HTML یا خارج از آن استفاده شوند:

ماوس بالا می‌آید!

آزمایش کنید

رویدادهای onmousedown، onmouseup و onclick

onmousedown, onmouseup و onclick رویدادها تشکیل‌دهنده رویداد کلیک ماوس کامل هستند.

اولین بار که دکمه ماوس کلیک شد،onmousedown رویداد فعال شد؛ سپس وقتی که دکمه ماوس رها شد،onmouseup رویداد فعال شد؛ در نهایت، وقتی که کاربر روی تصویر کلیک کرد،onclick رویداد فعال شد.

کلیک کنید

آزمایش کنید

مثال‌های بیشتر

onmousedown و onmouseup
وقتی که کاربر دکمه ماوس را فشار می‌دهد، تصویر را تغییر دهید.
onload
وقتی که صفحه به طور کامل بارگذاری شد، جعبه هشدار را نمایش دهید.
onfocus
وقتی که فیلد ورودی تمرکز می‌گیرد، رنگ پس‌زمینه آن را تغییر دهید.
رویدادهای ماوس
وقتی که نشانه به روی عنصر حرکت می‌کند، رنگ آن را تغییر دهید.

دستورالعمل شیء رویداد HTML DOM

برای لیست تمام رویدادهای HTML DOM، لطفاً به منابع کامل ما دستورالعمل شیء رویداد HTML DOM.