أكواد التفاعل مع الأحداث (Event Handling)

أكواد التفاعل مع الأحداث (Event Handling): تستخدم لتنفيذ أنشطة معينة عند حدوث أحداث معينة، مثل نقر المستخدم على زر معين أو تحريك الماوس فوق عنصر محدد.

إضافة مستمعين للنقر (Click Event Listeners):

// اختيار العنصر
const button = document.getElementById('myButton');

// إضافة مستمع الحدث
button.addEventListener('click', function() {
   // العملية التي تنفذ عند النقر
   console.log('تم النقر على الزر');
});
 

إضافة مستمعين لتغيير القيم (Change Event Listeners):

// اختيار العنصر
const input = document.getElementById('myInput');

// إضافة مستمع الحدث
input.addEventListener('change', function() {
   // العملية التي تنفذ عند تغيير القيمة
   console.log('تم تغيير القيمة');
});
 

إضافة مستمعين لتقديم النماذج (Form Submit Event Listeners):

// اختيار النموذج
const form = document.getElementById('myForm');

// إضافة مستمع الحدث
form.addEventListener('submit', function(event) {
   // منع تقديم النموذج الافتراضي
   event.preventDefault();
   
   // العملية التي تنفذ عند تقديم النموذج
   console.log('تم تقديم النموذج');
});
 

إضافة مستمعين لتحريك الماوس (Mouse Movement Event Listeners):

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('mousemove', function(event) {
   // العملية التي تنفذ عند تحريك الماوس
   console.log('تم تحريك الماوس');
});
 

إضافة مستمعين للماوس فوق العنصر (Mouse Over Event Listeners):

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('mouseover', function() {
   // العملية التي تنفذ عند تحريك الماوس فوق العنصر
   console.log('الماوس فوق العنصر');
});
 

إضافة مستمعين للتحريك خارج العنصر (Mouse Out Event Listeners):

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('mouseout', function() {
   // العملية التي تنفذ عند خروج الماوس من العنصر
   console.log('الماوس خارج العنصر');
});
 

إضافة مستمعين لضغط المفاتيح (Keyboard Event Listeners):

// اختيار العنصر
const input = document.getElementById('myInput');

// إضافة مستمع الحدث
input.addEventListener('keydown', function(event) {
   // العملية التي تنفذ عند ضغط المفتاح
   console.log('تم ضغط المفتاح: ' + event.key);
});
 

إضافة مستمعين لتحرير العناصر (Focus Event Listeners):

// اختيار العنصر
const input = document.getElementById('myInput');

// إضافة مستمع الحدث
input.addEventListener('focus', function() {
   // العملية التي تنفذ عند التركيز على العنصر
   console.log('تم التركيز على العنصر');
});
 

إضافة مستمعين لفقدان التركيز (Blur Event Listeners):

// اختيار العنصر
const input = document.getElementById('myInput');

// إضافة مستمع الحدث
input.addEventListener('blur', function() {
   // العملية التي تنفذ عند فقدان التركيز على العنصر
   console.log('تم فقدان التركيز عن العنصر');
});
 

إضافة مستمعين للتمرير (Scroll Event Listeners):

// اختيار العنصر
const container = document.getElementById('myContainer');

// إضافة مستمع الحدث
container.addEventListener('scroll', function() {
   // العملية التي تنفذ عند التمرير
   console.log('تم التمرير');
});
 

إضافة مستمعين لتغيير حجم النافذة (Resize Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('resize', function() {
   // العملية التي تنفذ عند تغيير حجم النافذة
   console.log('تم تغيير حجم النافذة');
});
 

إضافة مستمعين لتحميل المستند (DOMContentLoaded Event Listeners):

// إضافة مستمع الحدث
document.addEventListener('DOMContentLoaded', function() {
   // العملية التي تنفذ عند تحميل المستند بالكامل
   console.log('تم تحميل المستند بالكامل');
});
 

إضافة مستمعين للسحب والإفلات (Drag and Drop Event Listeners):

// اختيار العنصر المسحوب
const draggableElement = document.getElementById('myDraggable');

// إضافة مستمع الحدث
draggableElement.addEventListener('dragstart', function(event) {
   // تحديد البيانات التي سيتم نقلها
   event.dataTransfer.setData('text/plain', 'مرحبًا!');
});
 

إضافة مستمعين للتحميل الكامل للصفحة (Load Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('load', function() {
   // العملية التي تنفذ عند تحميل الصفحة بالكامل (بما في ذلك المحتوى الخارجي مثل الصور والملفات النصية)
   console.log('تم تحميل الصفحة بالكامل');
});
 

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('mouseout', function() {
   // العملية التي تنفذ عند خروج الماوس من العنصر
   console.log('الماوس خارج العنصر');
});
 

إضافة مستمعين للتغيير في عنصر الإدخال (Input Change Event Listeners):

// اختيار عنصر الإدخال
const input = document.getElementById('myInput');

// إضافة مستمع الحدث
input.addEventListener('input', function() {
   // العملية التي تنفذ عند تغيير قيمة عنصر الإدخال
   console.log('تم تغيير قيمة عنصر الإدخال');
});
 

إضافة مستمعين للتغيير في حالة المرور (Hash Change Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('hashchange', function() {
   // العملية التي تنفذ عند تغيير حالة المرور (الهاش)
   console.log('تغيرت حالة المرور (الهاش)');
});
 

إضافة مستمعين للتغيير في التاريخ (History Change Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('popstate', function() {
   // العملية التي تنفذ عند تغيير التاريخ (التصفح المستمر)
   console.log('تغير التاريخ (التصفح المستمر)');
});
 

إضافة مستمعين للتغيير في الموقع (Location Change Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('hashchange', function() {
   // العملية التي تنفذ عند تغيير الموقع
   console.log('تغير الموقع');
});
 

إضافة مستمعين للتغيير في حالة الشبكة (Online/Offline Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('online', function() {
   // العملية التي تنفذ عند تغير حالة الشبكة إلى متصلة
   console.log('الشبكة متصلة');
});

// إضافة مستمع الحدث
window.addEventListener('offline', function() {
   // العملية التي تنفذ عند تغير حالة الشبكة إلى غير متصلة
   console.log('الشبكة غير متصلة');
});
 

إضافة مستمعين للنقر المزدوج (Double Click Event Listeners):

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('dblclick', function() {
   // العملية التي تنفذ عند النقر المزدوج
   console.log('تم النقر المزدوج');
});
 

إضافة مستمعين للنقر بالزر الأيمن (Right Click Event Listeners):

// اختيار العنصر
const element = document.getElementById('myElement');

// إضافة مستمع الحدث
element.addEventListener('contextmenu', function(event) {
   // منع السلوك الافتراضي للزر الأيمن
   event.preventDefault();
   
   // العملية التي تنفذ عند النقر بالزر الأيمن
   console.log('تم النقر بالزر الأيمن');
});
 

إضافة مستمعين لتغيير التوجيه (Orientation Change Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('orientationchange', function() {
   // العملية التي تنفذ عند تغيير التوجيه (مثل تدوير الجهاز المحمول)
   console.log('تغير التوجيه');
});
 

إضافة مستمعين للتحقق من تحميل الصور (Image Load Event Listeners):

// اختيار الصورة
const image = document.getElementById('myImage');

// إضافة مستمع الحدث
image.addEventListener('load', function() {
   // العملية التي تنفذ عند تحميل الصورة بالكامل
   console.log('تم تحميل الصورة بالكامل');
});
 

إضافة مستمعين لتغيير اللغة (Language Change Event Listeners):

// إضافة مستمع الحدث
window.addEventListener('languagechange', function() {
   // العملية التي تنفذ عند تغيير لغة المستخدم في المتصفح
   console.log('تغير اللغة');
});
 

إضافة مستمعين للتغيير في التحميل (Progress Event Listeners):

// اختيار العنصر
const xhr = new XMLHttpRequest();

// إضافة مستمع الحدث
xhr.addEventListener('progress', function(event) {
   // العملية التي تنفذ أثناء تقدم التحميل
   console.log('تحميل: ' + event.loaded + ' من ' + event.total);
});
 

إضافة مستمعين للتغيير في التسليم (Delivery Event Listeners):

// اختيار العنصر
const xhr = new XMLHttpRequest();

// إضافة مستمع الحدث
xhr.addEventListener('readystatechange', function(event) {
   // التأكد من اكتمال التسليم
   if (xhr.readyState === 4 && xhr.status === 200) {
       // العملية التي تنفذ عند اكتمال التسليم
       console.log('تم التسليم بنجاح');
   }
});
 

إضافة مستمعين للتغيير في حالة الصفحة (Page Visibility Event Listeners):

// إضافة مستمع الحدث
document.addEventListener('visibilitychange', function() {
   // التحقق من حالة الصفحة
   if (document.hidden) {
       // العملية التي تنفذ عندما تكون الصفحة مخفية
       console.log('الصفحة مخفية');
   } else {
       // العملية التي تنفذ عندما تكون الصفحة مرئية
       console.log('الصفحة مرئية');
   }
});