ورود به کارتابل مشتریان وب مهراز
رویدادهای HTML DOM در JavaScript
یادگیری JavaScriptHTML DOM اجازه می دهد تا جاوا اسکریپت به رویدادهای HTML واکنش نشان دهد:
واکنش به رویدادها
جاوا اسکریپت می تواند هنگام رویداد رخ دهد، مانند زمانی که یک کاربر بر روی یک عنصر HTML کلیک کند.
برای اجرای کد هنگامی که یک کاربر بر روی عنصر کلیک می کند، کد جاوا اسکریپت را به یک ویژگی رویداد HTML اضافه می کند:
نمونه هایی از رویدادهای 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 را به یک عنصر دکمه اختصاص دهید:
<button onclick="displayDate()">Try it</button> در مثال بالا، یک تابع به نام displayDate وقتی دکمه کلیک می شود اجرا می شود.
رویدادها را با استفاده از HTML DOM اختصاص دهید
HTML DOM به شما اجازه می دهد وقایع را به عناصر HTML با استفاده از جاوااسکریپت اختصاص دهید:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script> در مثال بالا، یک تابع به نام displayDate به یک عنصر HTML با id = "myBtn" اختصاص داده می شود.
هنگامی که روی دکمه کلیک می شود، تابع اجرا می شود.
رویداد onload و onunload
رویدادهای onload و onunload زمانی شروع می شود که کاربر وارد یا از صفحه خارج شود.
رویداد onload را می توان برای بررسی نوع مرورگر بازدید کننده و نسخه مرورگر مورد استفاده قرار داد و نسخه مناسب صفحه وب را بر اساس اطلاعات بارگذاری کرد.
رویدادهای Onload و Onunload را می توان برای مقابله با کوکی ها استفاده کرد.
<body onload="checkCookies()"> رویداد onchange
رویداد مبادله اغلب در ترکیب با اعتبارسنجی فیلدهای ورودی مورد استفاده قرار می گیرد.
در زیر یک مثال از نحوه استفاده از مبادله است. تابع ()uppercase هنگامی که یک کاربر محتوای یک فیلد ورودی را تغییر می دهد نامیده می شود.
<body onload="checkCookies()"> رویدادهای onmouseover و onmouseout
رویدادهای onmouseover و onmouseout می توانند برای هدایت یک تابع هنگام استفاده از یک عنصر HTML به عنصر HTML یا خارج از آن استفاده شوند.
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}رویدادهای onmouseedown، onmouseup و onclick
رویدادهای onmouseedown، onmouseup و onclick همه قسمتهای یک کلیک ماوس هستند. ابتدا وقتی یک دکمه ی ماوس کلیک می شود، رویداد onmousedown فعال می شود، سپس هنگامی که دکمه ی ماوس آزاد می شود، رویداد onmouseup شروع می شود، و در نهایت، هنگامی که کلیک ماوس به پایان می رسد، رویداد onclick فعال می شود.
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
نظر شما
>