HTML DOMبه جاوااسكريپت اجازه ميدهدكه نسبت به رويدادهايHTML عكس العمل نشان دهد . در زير عناصري وجود دارند تا بتوانيد عكس العمل جاوااسكريپت را نسبت به نمونه رويداد ها درك نمائيد.
يك كد جاوااسكريپت را ميتوان زماني كه يك رويداد رخ ميدهد اجرا نمود، مانند زماني كه كاربر روي عنصري ازHTML كليك ميكند .
براي اجراي كد زماني كه كاربرروي يك عنصر كليك ميكند ، كد جاوااسكريپت را به ويژگيonclick عنصرHTML اضافه نمائيد.مطابق فرمت زير :
نمونه هائي از رويدادهاي: HTML
مثال ـ در مثال زير هنگاميكه كاربر روي عنصر<h1> كليك ميكند محتوي آن تغيير ميكند.
<!DOCTYPE html> <html> <body> <h1onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1> </body> </html>
مثال ـ در مثال زير يك تابع در كنترل كننده رويداد فراخواني ميشود.
<!DOCTYPE html> <html> <body> <h1onclick="changeText(this)">Click on this text!</h1> <script> function changeText(id) { id.innerHTML = "Ooops!"; } </script > </body> </html>
براي اختصاص رويدادها به عناصزHTML ميتوانيد از ويژگي هاي رويداد استفاده كنيد .
مثال ـ يك رويدادonclick را بيك عنصر <button> اختصاص ميدهد .
<button onclick="displayDate()">Try it
درمثال فوق تابعي بنامdisplaydate هنگاميكه دكمه كليك ميشود ، اجراميگردد .
HTML DOMاجازه ميدهد كه شما بتوا نيد با استفاده ازجاوااسكريپت رويدادي را به عنصري از HTML اختصاص دهيد.
مثال ـ اختصاص رويدادonclick به عنصرباتم
<script> document.getElementById("myBtn").onclick = displayDate; </script >
در مثال فوق تابعي بانامdisplaydate به عنصرHTML با شناسهid="myBtn" اختصاص داده ميشود . تابع هنگامي كه كليد كليك ميشود باجرا در مي آيد.
رويدادهايonload و onunloadهنگام ورود وخروج كاربر از صفحه فعال ميشوند.
رويدادonload براي بررسي مرورگر بازديدكننده و نسخه آن، وبارگذاري نسخه مناسب صفحه وب براساس اطلاعات.
رويدادهايonload وonunload را ميتوان براي مقابه با كوكي ها استفاده كرد.
مثال ـ رويدادonload براي مقابله با كوكي ها
body onload="checkCookies()">
در حاليكه كاربر داده هاي ورودي را وارد ميكند، رويدادoninput اغلب به برخي از اقدامات مربوط مي شود.
مثال ـ دراين مثال از رويدادoninput براي تغيير محتوي فيلد استفاده شده است .
<input type="text" id="fname" oninput="upperCase()">
در مثال بالا محتوي فيلد ورودي در هنگام واردن كاربر به حروف بزرگ تبديل مي شود.
رويدادonchange اغلب در تركيب با اعتبارسنجي فيلدهاي ورودي استفاده مي شود .
در مثال زير نشان ميدهد كه چگونه از رويدادonchange براي فراخواني تابع upperCae( )در هنگاميكه فيلد ورودي تغيير ميكند ، استفاده ميشود .
مثال ـ رويدادonchang
<input type="text" id="fname" onchange="upperCase()">
رويدادهايonmouseover وonmouout مي توانند براي راه اندازي يك تابع زماني كه كاربر روي يك عنصرHTML مي رود ويا ازآن خارج مي شود، مورد استفاده قرار گيرند.
رويدادهايonmousedown , onmouseup وonclick همگي بخش هاي يك كليك ماوس هستند .ابتدا هنگاميكه يك دكمه ماوس كليك ميشود، رويدادonmousedown فعال ميشود، سپس زمانيكه دكمه ماوس آزاد ميگردد، رويدادonmouseup فعال ميشود . درنهايت ، زماني كه كليك ماوس كامل شد، رويدادonclick فعال ميگردد .
مثال هاي بيشتري از رويدادها در جدول زير:
| رويداد | شرح مثال | تلاش
دراجرا |
|---|---|---|
| onmousedown onmouseup | تغيير تصوير با نگهداري ماوس روي دكمه | |
| onload | هنگاميكه بارگذاري صفحه تمام ميشود پيغام داده ميشود | |
| onfocus | رنگ زمينه يك فيلد ورودي را هنگام ورود تغيير ميدهد. | |
| mouse Events | هنگاميكه مكان نما روي عنصر حركت ميكند تغيير رنگ ميدهد. | |