جافاسكربتالأحداث

<!-- الموجودة في السكربت showAlert() عند النقر على هذا الزر سيتم تنفيذ الدالة -->
<button onclick="showAlert()">Click Me</button>

<script>
    // تقوم بإظهار نافذة منثبقة عندما يتم تنفيذها showAlert هنا قمنا بتعريف دالة إسمها
    function showAlert() {
        alert('The click event is fired!');
    }
</script>

<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>

<script>
    // myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
    let myBtn = document.querySelector('#myBtn');

    // myBtn في العنصر الذي يمثله click هنا قمنا بإضافة الدالة التي نريدها أن تتنفذ في حال حصول الحدث 
    myBtn.onclick = function() {
        alert('The click event is fired!');
    };
</script>

<!-- حتى نستطيع الوصول إليه لاحقاً id هنا قمنا بإعطاء الزر -->
<button id="myBtn">Click Me</button>

<script>
    // myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
    let myBtn = document.querySelector('#myBtn');

    // myBtn و الدالة التي سيتم تنفيذها في حال حصول الحدث في العنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
    myBtn.addEventListener('click', function() {
        alert('The click event is fired!');
    });
</script>

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير دالة جديدة بدون إسم ليتم تنفيذها عند حصول الحدث 
myBtn.addEventListener('click', function() {
    alert('The click event is fired!');
});

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير دالة سهمية جديدة ليتم تنفيذها عند حصول الحدث 
myBtn.addEventListener('click', () => {
    alert('The click event is fired!');
});

// عند استدعاءها تقوم بعرض نافذة تنبيه منبثقة showAlert هنا قمنا بتعريف دالة إسمها
function showAlert() {
    alert('The click event is fired!');
}

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير إسم الدالة التي سيتم تنفيذها عند حصول الحدث     
myBtn.addEventListener('click', showAlert);

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// event الدالة التي سيتم تنفيذها عند حصول الحدث أضفنا لها باراميتر إسمه    
// حتى نستطيع من خلاله الوصول إلى معلومات الحدث نفسه مثل نوعه
myBtn.addEventListener('click', (event) => {
    alert('The type of event is: ' + event.type);
});

// count عدد النقرات سنخزنه في المتغير
let count = 0;

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let result = document.querySelector('#result');

// مهمتها طباعة عند النقرات على الزر showCount هنا قمنا بتعريف دالة إسمها
function showCount() {
    // count أولاً تقوم بإضافة واحد على عدد النقرات الذي نحتفظ فيه المتغير
    count++;
    // result و من ثم تقوم بعرض قيمته في الوسم الذي يمثله المتغير 
    result.innerHTML = 'Total clicks = ' + count;
    // من الزر click أكبر أو تساوي 3 فإنه سيتم إزالة الحدث count عندما تصبح قيمة
    if (count >= 3) {
        myBtn.removeEventListener('click', showCount);
    }
}

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
// مع تمرير إسم الدالة التي سيتم تنفيذها عند حصول الحدث     
myBtn.addEventListener('click', showCount);

// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
let myBtn = document.querySelector('#myBtn');

// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
myBtn.addEventListener('click', () => {
    alert('First click event is fired!');
});

// من جديد myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
myBtn.addEventListener('click', () => {
    alert('Second click event is fired!');
});

<style>
    .dark-mode {
        background: black;
        color: darkgray;
    }
</style>

<button id="toggleMode">Change Mode</button>

<script>
    // toggleMode في متغير إسمه toggleMode يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
    let toggleMode = document.querySelector('#toggleMode')

    // toggleMode للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
    toggleMode.addEventListener('click', () => {
        // body في متغير إسمه body هنا سيتم تخزين العنصر
        let body = document.querySelector('body');
    
        // dark-mode يتناوب على استخدام الكلاس body هنا سيتم جعل العنصر الذي يمثله المتغير
        body.classList.toggle('dark-mode');
    });
</script>

// input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
let input = document.querySelector('#input');

// key في متغير إسمه key يساوي id هنا قمنا بتخزين العنصر الذي يملك
let key = document.querySelector('#key');
        
// keyCode في متغير إسمه keyCode يساوي id هنا قمنا بتخزين العنصر الذي يملك
let keyCode = document.querySelector('#keyCode');

// input للعنصر الذي يمثله المتغير keyup هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام المستخدم بالنقر على زر في الكيبورد و رفع إصبعه عنه
input.addEventListener('keyup', (event) => {
    // key إسم الزر الذي يتم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
    key.innerHTML = 'Last key: ' + event.key;
    // keyCode رقم اليونيكود الخاص بالزر الذي تم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
    keyCode.innerHTML = 'Last keyCode: ' + event.keyCode;
});

// myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك
let myDiv = document.querySelector('#myDiv');

// myDiv للعنصر الذي يمثله المتغير mousemove هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام المستخدم بتحريك الماوس فوقه
myDiv.addEventListener('mousemove', (event) => {
    // myDiv إحداثيات مؤشر الماوس سيتم عرضها في العنصر الذي يمثله المتغير
    myDiv.innerHTML = 'Mouse pointer X: ' + event.clientX + '<br>';
    myDiv.innerHTML += 'Mouse pointer Y: ' + event.clientY;
});

// myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك
let myDiv = document.querySelector('#myDiv');

// myDiv للعنصر الذي يمثله المتغير mouseover هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
myDiv.addEventListener('mouseover', () => {
    // سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس فوق العنصر الذي يمثله المتغير
    myDiv.innerHTML = 'Mouse pointer is over me.';
});

// myDiv للعنصر الذي يمثله المتغير mouseout هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
myDiv.addEventListener('mouseout', () => {
    // سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس خارج العنصر الذي يمثله المتغير
    myDiv.innerHTML = 'Mouse pointer is not over me.';
});

// select في متغير إسمه select يساوي id هنا قمنا بتخزين العنصر الذي يملك
let select = document.querySelector('#select');
        
// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
        
// select للعنصر الذي يمثله المتغير change هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام تم تغيير القيمة الحالية للعنصر
select.addEventListener('change', () => {
    // status الجديدة سيتم عرضها في العنصر select قيمة العنصر
    status.innerHTML = 'Selected value = ' + select.value;
});

// input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
let input = document.querySelector('#input');

// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');

// input للعنصر الذي يمثله المتغير focus هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
input.addEventListener('focus', () => {
    // سيتم تغييره status النص الموجود في العنصر
    status.innerHTML = 'Input is on focus.';
});

// input للعنصر الذي يمثله المتغير blur هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
input.addEventListener('blur', () => {
    // سيتم تغييره status النص الموجود في العنصر
    status.innerHTML = 'Input is on blur.';
});

// myForm في متغير إسمه myForm يساوي id هنا قمنا بتخزين العنصر الذي يملك
let form = document.querySelector('#myForm');

// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');

// form للعنصر الذي يمثله المتغير submit هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
form.addEventListener('submit', (event) => {
    // إفتراضياً النموذج يقوم بإرسال البيانات الموجودة فيه إلى السيرفر
    // ثم يقوم بتحديث الصفحة عندما يتم النقر على زر إرسال البيانات
    // فإننا نمنع ذلك preventDefault() و لكن عند استدعاء الدالة
    event.preventDefault();

    // مع إزالة أي password و name هنا قمنا بتخزين محتوى الحقول
    // مسافات فارغة من أطرافها في متغيرات ليكون التعامل معها أسهل
    const name = document.querySelector("#name").value.trim();
    const password = document.querySelector("#password").value.trim();

    // هنا قمنا بالتحقق من محتوى الحقول لمعرفة ما إن كانت فارغة أم لا
    if (name === '' || password === '') {
        // لإعلام المستخدم بأنه يجب أن يدخل قيم فيها status إذا كان أحدها فارغ سيتم عرض نص في العنصر
        status.innerHTML = 'Please fill in all fields.';
        // باللون بالأحمر status بعدها سيتم تلوين نص العنصر 
        status.style.color = 'red';
        // نضعه لعدم تنفيذ الأوامر المتبقية في الحدث return الأمر
        return;
    }

    // status إذا إنتهى التحقق من محتوى الحقول و لم يكن هناك مشكلة سيتم عرض قيمها في العنصر
    status.innerHTML = '<h3>Submitted data<h3>';
    status.innerHTML += 'Name: ' + name + '<br>';
    status.innerHTML += 'Password: ' + password;

    // باللون الأخضر status بعدها سيتم تلوين نص العنصر 
    status.style.color = 'green';
            
    // في حال أردت الآن إرسال البيانات إلى السيرفر يمكنك إستدعاء الدالة التالية
    // form.submit();

    // هنا قمنا بحذف قيم الحقول التي تم إدخالها في النموذج و هذا أمر إختياري
    form.reset();
});

// status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
let status = document.querySelector('#status');
        
// الذي يمثل الصفحة نفسها window للكائن load هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما يتم تحميل محتوى الصفحة بالكامل في جهاز المستخدم
window.addEventListener('load', () => {
    // status هنا سيتم إعلام المستخدم بذلك كنص في العنصر
    status.innerHTML = 'The page is loaded completely.';
});

// dimensions في متغير إسمه dimensions يساوي id هنا قمنا بتخزين العنصر الذي يملك
let dimensions = document.querySelector('#dimensions');
        
// الذي يمثل الصفحة نفسها window للكائن resize هنا قمنا بإضافة الحدث
// هذا الحدث يتم تنفيذه عندما تغيير حجم المتصفح نفسه بواسطة الماوس
window.addEventListener('resize', () => {
    // dimensions هنا سيتم إعلام المستخدم بقياسات الصفحة كنص في العنصر
    dimensions.innerHTML = 'Width: ' + window.outerWidth + '<br>';
    dimensions.innerHTML += 'Height: ' + window.outerHeight;
});