JavaScript Events
-
Events في JavaScript هي مجموعه من الأكواد المعرفة مسبقا والمتعلقة ب HTML elements ، بحيث عند استخدامها مع Html elements بتم استدعاء الكود الخاص JavaScript والتفاعل معها. هذه events ممكن تكون events متعلقة بالمتصفح او events متعلقة بالمستخدم.
من الأمثلة على Events
- عند بدء تحميل الصفحه onload
- عند انتهاء تحميل الصفحه onunload
- عند التغيير على قيمة input filed
- عند النقر فوق button
عادتا يتم ربط هذه events مع اكواد JavaScript لتنفيذ أشياء معينه حسب الحاجه.
نطبق مثال لاستدعاء function لعرض رسالة ترحيب عند الدخول الى الصفحه onload event .
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body onload="WelcomeMessage()">
<h3>JavaScript typeof Operator</h3>
<p id="Total"></p>
<script>
function WelcomeMessage()
{
alert("Hi, Welcome")
}
</script>
</body>
</html>
النتيجة
تمام استخدمنا event هون عند تحميل الصفحه onload لاستدعاء function لعرض رسالة ترحيب.
طريقة الكتابة مع single quotes
<element event='some JavaScript'>
او مع double quotes
<element event="some JavaScript">
المثال التالي بنطبق onclick event مع button لعرض رسالة الترحيب (عند النقر فوق button)
طبق الكود التالي :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Total"></p>
<input type="button" onclick="WeclomeMessage()" value="Print Weclome Message">
<script>
function WeclomeMessage()
{
alert("Hi, Welcome");
}
</script>
</body>
</html>
النتيجة:
عند النقر فوق button باستخدام onclick event نستدعي function باسم WeclomeMessage
تمام نشوف الأمثلة التالية :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<input type="button" onclick="WeclomeMessage()" value="Print Weclome Message">
<button onclick="document.getElementById('Date').innerHTML = Date()">The time is?</button>
<button onclick="this.innerHTML = Date()">The time is?</button>
<script>
function WeclomeMessage()
{
alert("Hi, Welcome");
}
</script>
</body>
</html>
شغل الصفحة وشوف النتيجة:
الكود
<button onclick="document.getElementById('Date').innerHTML = Date()">The time is?</button>بعرض التاريخ الحالي في p> tag>
الكود:
<button onclick="this.innerHTML = Date()">The time is?</button>
بغير اسم button الى التاريخ الحالي لان استخدمنا الكود
this.innerHTML = Date()
النتيجة:
| event | الوصف |
| onchange | عند حدوث تغيير على HTML element |
| onclick | عند النقر فوق HTML element |
| Onmouseover | عند تحريك المؤشر فوق HTML element |
| Onmouseout | عند تحريك المؤشر بعيدا عن HTML element |
| Onkeydown | عند الضغط على لوحة المفاتيح |
| Onload | عند تحميل الصفحه |
| onunload | عند الانتهاء من تحميل الصفحه |
اترك تعليقك