سنناقش فى هذا الفصل كل المعلومات حول JavaScript Events، مع الأمثلة التوضيحية.

 

JavaScript Events

 

جافا سكريبت بها أحداث لتوفير واجهة ديناميكية لصفحة ويب. ترتبط هذه الأحداث بعناصر في نموذج كائن المستند (DOM).

في لغة HTML ، هناك العديد من الأحداث التي تشير إلى أن بعض الأنشطة يقوم بها المستخدم أو المتصفح.

عندما يتم تضمين كود جافا سكريبت في HTML ، تتفاعل js مع هذه الأحداث وتسمح بالتنفيذ. تسمى عملية الرد على الأحداث هذه معالجة الأحداث. وهكذا ، تتعامل js مع أحداث HTML عبر معالجات الأحداث.

يُعرف التغيير في حالة الكائن باسم الحدث Event.

 

 

أحداث HTML

 

أحداث HTML هي أشياء تحدث لعناصر HTML. يمكن أن يكون حدث HTML شيئًا يفعله المتصفح ، أو شيئًا يفعله المستخدم.

يسمح HTML بإضافتها إلى سمات معالج الأحداث ، مع كود JavaScript ، إلى عناصر HTML.

فيما يلى بناء جملة (Syntax) الخاص بالـ Events:

 

<element event="Here Execute JavaScript Code"> // Double quotes
// --- Or ---
<element event='Here Execute JavaScript Code'> // Single quotes

 

الأن، سوف نلقى نظرة على بعض الأمثلة على أحداث HTML:

 

1) onkeyup event

 

<!DOCTYPE html>
<html>
<head>
    <title>Onkeyup Event</title>
    <meta charset="UTF-8" />
</head>
<body>

    <input type="text" id="user_input" onkeyup="showMeText()" placeholder="Write Here">
    <p id="text"></p>

    <script>
        function showMeText() {
           var userInputVal = document.getElementById('user_input').value;
           document.getElementById('text').innerHTML = userInputVal;
        }
    </script>
    
</body>
</html>

 

2) onclick event

 

<!DOCTYPE html>
<html>
<head>
    <title>Onclick Event</title>
    <meta charset="UTF-8" />
</head>
<body>

    <button type="button" onclick="showAlert()">Click to Show Alert</button>

    <script>
        function showAlert() {
           alert("Hello World!");
        }
    </script>
    
</body>
</html>

 

3) onfocus event

 

<!DOCTYPE html>
<html>
<head>
    <title>Onfocus Event</title>
    <meta charset="UTF-8" />
</head>
<body>

    <input type="text" id="focus" onfocus="changeBg()" placeholder="Focus Here">

    <script>
        function changeBg() {
           document.getElementById('focus').style.background = "red";
        }
    </script>
    
</body>
</html>
Advertisements

 

4) onblur event

 

<!DOCTYPE html>
<html>
<head>
    <title>Onblur Event</title>
    <meta charset="UTF-8" />
</head>
<body>

 <input type="text" onblur="alert('Blur event Run!')" 
        placeholder="Write Here and click elsewhere in page">
    
</body>
</html>

 

أشهر الأحداث فى HTML

 

الحدثالوصف
onkeyupيعمل هذا الحدث عندما يضغط المستخدم على لوحة مفاتيح ثم يحرر أو يترك المفتاح.
onclickيعمل هذا الحدث عند النقر بالماوس على عنصر HTML.
onmouseoverيعمل هذا الحدث عندما يأتي مؤشر الماوس فوق عنصر HTML.
onfocusيعمل هذا الحدث عندما يركز المستخدم على عنصر HTML.
onblurيعمل هذا الحدث عندما يكون التركيز بعيدًا عن عنصر النموذج.
onchangeيعمل هذا الحدث عندما يقوم المستخدم بتعديل أو تغيير قيمة عنصر النموذج.
onsubmitيعمل هذا الحدث عندما يرسل المستخدم النموذج.
onloadيعمل هذا الحدث عندما ينتهى المتصفح من تحميل الصفحة.