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

HTML DOM اجازه می دهد تا جاوا اسکریپت به رویدادهای HTML واکنش نشان دهد:

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

جاوا اسکریپت می تواند هنگام رویداد رخ دهد، مانند زمانی که یک کاربر بر روی یک عنصر HTML کلیک کند.

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

onclick=JavaScript

نمونه هایی از رویدادهای HTML:

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

در این مثال، محتوای عنصر <h1> هنگامی که یک کاربر بر روی آن کلیک می کند تغییر می کند:

واکنش به رویدادها
 <!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html> 
مشاهده مثال

واکنش به رویدادها
 <!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
    id.innerHTML = "Ooops!";
}
</script>

</body>
</html> 
مشاهده مثال

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

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

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

ویژگی های رویداد HTML
 <button onclick="displayDate()">Try it</button> 
مشاهده مثال

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

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

HTML DOM به شما اجازه می دهد وقایع را به عناصر HTML با استفاده از جاوااسکریپت اختصاص دهید:

رویدادها را با استفاده از HTML DOM اختصاص دهید
 <script>
document.getElementById("myBtn").onclick = displayDate;
</script> 
مشاهده مثال

در مثال بالا، یک تابع به نام displayDate به یک عنصر HTML با id = "myBtn" اختصاص داده می شود.
هنگامی که روی دکمه کلیک می شود، تابع اجرا می شود.

رویداد onload و onunload

رویدادهای onload و onunload زمانی شروع می شود که کاربر وارد یا از صفحه خارج شود.
رویداد onload را می توان برای بررسی نوع مرورگر بازدید کننده و نسخه مرورگر مورد استفاده قرار داد و نسخه مناسب صفحه وب را بر اساس اطلاعات بارگذاری کرد.
رویدادهای Onload و Onunload را می توان برای مقابله با کوکی ها استفاده کرد.

onload and onunload
 <body onload="checkCookies()"> 
مشاهده مثال

رویداد onchange

رویداد مبادله اغلب در ترکیب با اعتبارسنجی فیلدهای ورودی مورد استفاده قرار می گیرد.

در زیر یک مثال از نحوه استفاده از مبادله است. تابع ()uppercase هنگامی که یک کاربر محتوای یک فیلد ورودی را تغییر می دهد نامیده می شود.

onchange
 <body onload="checkCookies()"> 
مشاهده مثال

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

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

onmouseover and onmouseout
function mOver(obj) {
    obj.innerHTML = "Thank You"
}

function mOut(obj) {
    obj.innerHTML = "Mouse Over Me"
}
مشاهده مثال

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

رویدادهای onmouseedown، onmouseup و onclick همه قسمتهای یک کلیک ماوس هستند. ابتدا وقتی یک دکمه ی ماوس کلیک می شود، رویداد onmousedown فعال می شود، سپس هنگامی که دکمه ی ماوس آزاد می شود، رویداد onmouseup شروع می شود، و در نهایت، هنگامی که کلیک ماوس به پایان می رسد، رویداد onclick فعال می شود.

onmousedown, onmouseup and onclick
function mDown(obj) {
    obj.style.backgroundColor = "#1ec5e5";
    obj.innerHTML = "Release Me";
}

function mUp(obj) {
    obj.style.backgroundColor="#D94A38";
    obj.innerHTML="Thank You";
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط