همراهان گرامی ، وقت شما بخیر، بااموزشی در زمینه HTML DOM EVENTS – رخدادهای مدل DOM در خدمت شما هستم. امیدوارم که شاد وسلامت همواره باشید.مدل مبتنی بر شی سند HTML (مدل DOM) به جاوا اسکرپیت این امکان را می دهد که به رخدادهای HTML واکنش نشان دهد.

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

کد جاوا اسکریپت می تواند زمانی که یک رویداد (event) رخ می دهد، اجرا شود، به عنوان مثال به زمانی که کابر روی یک المان مشخص HTML کلیک می کند، اشاره کرد.

برای اینکه یک کد پس از کلیک کاربر روی المان مشخص اجرا شود، کافی است کد جاوا اسکریپت را به خصیصه ی رخداد یا همان event attribute عنصر مربوطه اضافه کرد:

onclick=JavaScript

مثالی از رخدادهای :HTML

۱٫ زمانی که کاربر موس را کلیک می کند

۲٫ هنگامی که یک صفحه به طور کامل بارگذاری می شود

۳٫ زمانی که یک تصویر بارگذاری می شود

۴٫ هنگامی که مکان نمای موس روی یک المان قرار می گیرد

۵٫ زمانی که فیلد ورودی (input field) تغییر می کند

۶٫ هنگامی که فرم HTML ارسال می گردد

۷٫ وقتی که کاربر یکی از دکمه های صفحه کلید را فشار می دهد

در این مثال، هنگامی که کاربر روی المان
کلیک می کند، محتویات المان نام برده نیز تغییر می کند:

نمونه یک
?
۱

Click on this text!

در این مثال، یک تابع از event handler فراخوانی می شود:

نمونه دو
?
۱
۲
۳

function changeText(id) {
id.innerHTML = “Ooops!”;
}

خصیصه های event، HTML

به منظور تخصیص رخداد (event) به عنصرهای HTML، می توان از خصیصه ی رخداد (event attribute) بهره جست:

در مثال پیش رو یک رخداد onClick به المان button اختصاص می دهیم:

نمونه سه
?
۱
۲
۳

function displayDate() {
document.getElementById(“demo”).innerHTML = Date();
}

در مثال فوق، زمانی که روی دکمه (عنصر button) کلیک می شود، تابعی به نام displayDate فراخوانده شده و اجرا می گردد.

تخصیص رخداد به وسیله ی مدل DOM

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

در مثال زیر یک رخداد onClick به المان button انتساب می دهیم:

نمونه چهار
?
۱
۲
۳
۴

document.getElementById(“myBtn”).onclick = displayDate;
function displayDate() {
document.getElementById(“demo”).innerHTML=Date();
}

در این مثال تابعی به نام displayDate، به المانی که شناسه ی آن “myBtn” است تخصیص می دهیم. تابع مزبور به محض کلیک روی دکمه، اجرا می شود.

رخدادهای onload و onunload

Event های onLoad و onunLoad زمانی اجرا می شوند که کاربر دکمه ای کلیک کرده یا صفحه را ترک کند.

onload رخدادی است که با وارد شدن کاربر به صفحه اجرا می شود و onunload رویدادی است با خروج کاربر از صفحه راه اندازی می شود. onload معمولا برای چک کردن نوع و ورژن مرورگر بازدیدکننده بکار می رود و با توجه به اطلاعات بدست آمده یک نسخه ی مناسب از صفحه وب را بارگذاری یا load می کند.

رخدادهای unload و onunload را می توان برای کار با کوکی ها مورد استفاده قرار داد. دو رویداد ذکر شده اغلب برای تنظیم cookie ها، زمانی که که کاربر وارد صفحه می شود و یا از صفحه خارج می شود، نیز بکار گرفته می شوند.

نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷
۸

function checkCookies() {
var text = “”;
if (navigator.cookieEnabled == true) {
text = “Cookies are enabled.”;
} else {
text = “Cookies are not enabled.”;
} document.getElementById(“demo”).innerHTML = text;
}

رخداد onchange

این رخداد اغلب به صورت ترکیبی و به همراه اعتبار سنجی فیلدهای ورودی بکار گرفته می شود. onchange رخدادی است که به هنگام ایجاد تغییر در اجزای فرم، اجرا می گردد.

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

نمونه شش
?
۱
۲
۳
۴

function myFunction() {
var x = document.getElementById(“fname”);
x.value = x.value.toUpperCase();
}

رخدادهای onmouseover و onmouseout

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

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

سه رخداد نام برده همگی بخشی از mouse-click هستند. onmousedown- این رخداد زمانی که دکمه موس، فشار داده می شود اجرا می گردد.Onmouseup این رویداد هنگامی که دکمه ی موس، رها می شود رخ می دهد.

نمونه هفت
?
۱
۲
۳
۴
۵
۶

function mOver(obj) {
obj.innerHTML = “Thank You”
}
function mOut(obj) {
obj.innerHTML = “Mouse Over Me”
}

onclick – -زمانی که عملیات کلیک کردن موس، کامل می شود، روی می دهد.

نمونه هشت
?
۱
۲
۳
۴
۵
۶
۷
۸

function mDown(obj) {
obj.style.backgroundColor = “#1ec5e5”;
obj.innerHTML = “Release Me”;
}
function mUp(obj) {
obj.style.backgroundColor = “#D94A38”;
obj.innerHTML = “Thank You”;
}