آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش HTML DOM EVENTS - رخدادهای مدل DOM

دوره های مرتبط با این مقاله

HTML DOM EVENTS - رخدادهای مدل DOM

مدل مبتنی بر شی سند HTML (مدل DOM) به جاوا اسکرپیت این امکان را می دهد که به رخدادهای HTML واکنش نشان دهد.

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

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

onclick=JavaScript

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

  1. زمانی که کاربر موس را کلیک می کند
  2. هنگامی که یک صفحه به طور کامل بارگذاری می شود
  3. زمانی که یک تصویر بارگذاری می شود
  4. هنگامی که مکان نمای موس روی یک المان قرار می گیرد
  5. زمانی که فیلد ورودی (input field) تغییر می کند
  6. هنگامی که فرم HTML ارسال می گردد
  7. وقتی که کاربر یکی از دکمه های صفحه کلید را فشار می دهد

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

نمونه یک

 

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";
        }
امتحان کنید

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 3134
  •    2006
  • تاریخ ارسال :   1394/08/15

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش HTML DOM EVENTS - رخدادهای مدل DOM
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .