تقدم لك هذه المقالة المعرفة ذات الصلة بجافا سكريبت، وهي تقدم بشكل أساسي ملخصًا بسيطًا للأحداث. الأحداث هي بعض اللحظات التفاعلية المحددة التي تحدث في المستندات أو نوافذ المتصفح .
[توصيات ذات صلة: فيديو تعليمي لجافا سكريبت، واجهة الويب الأمامية]
الأحداث هي لحظات محددة من التفاعل التي تحدث داخل مستند أو نافذة متصفح. يتم تحقيق التفاعل بين JavaScript وHTML من خلال الأحداث. بالنسبة لتطبيقات الويب، هناك الأحداث التمثيلية التالية: أحداث النقر، وأحداث تحريك الماوس للداخل والخروج، وأحداث الضغط/النوافذ المنبثقة على لوحة المفاتيح، وما إلى ذلك. الأحداث هي لحظات محددة من التفاعل التي تحدث في مستند أو نافذة متصفح. يمكنك استخدام المستمعين (أو معالجات الأحداث) للاشتراك في الأحداث بحيث يتم تنفيذ التعليمات البرمجية المناسبة عند وقوع الحدث.
فيما يلي مقدمة مختصرة للأحداث التالية شائعة الاستخدام: أحداث تحميل المستندات، وكائنات الأحداث، وأحداث فقاعات الأحداث، وتفويض الأحداث، وربط الأحداث، ونشر الأحداث، وأحداث لوحة المفاتيح.
حدث تحميل المستند (عند التحميل): يتم تشغيل حدث التحميل بعد تحميل الصفحة بأكملها. استخدم كما هو موضح:
ومن ناحية الأداء فمن الأفضل كتابته في أسفل الصفحة! تتم كتابة كود js في أسفل الصفحة للتأكد من تحميل الصفحة عند تنفيذ الكود. يمكن أن يظهر window.onload مرة واحدة فقط على الصفحة، وسيحل الكود اللاحق محل الكود السابق.
كائن الحدث: بعد وقوع الحدث، سيتم إنشاء كائن حدث وتمريره إلى وظيفة الاستماع كمعلمة. الأداء المحدد هو أننا نقوم بتمرير معلمة حدث في وظيفة رد الاتصال، ويتم تمرير قيمة هذه المعلمة تلقائيًا بواسطة JS. سيحتوي كائن الحدث هذا على جميع المعلومات ذات الصلة بهذا الحدث، بما في ذلك الحدث (الماوس/لوحة المفاتيح)، ومشغل الحدث، وهدف الحدث، وما إلى ذلك.
عند تشغيل حدث على كائن DOM، يتم إنشاء كائن حدث، والذي يحتوي على جميع المعلومات المتعلقة بالحدث. يتضمن العناصر التي تسببت في الحدث ونوع الحدث والمعلومات الأخرى المتعلقة بالحدث المحدد. ستقوم متصفحات DOM القياسية بتمرير كائن الحدث إلى معالج الحدث. مهما كان معالج الحدث، فسيتم تمرير كائن الحدث. يحتوي كائن الحدث على خصائص وأساليب مرتبطة بالحدث المحدد الذي قام بإنشائه. تختلف أنواع الأحداث التي يتم تشغيلها، كما تختلف الخصائص والأساليب المتوفرة أيضًا. فيما يلي مقدمة مختصرة عن أحداث الماوس/لوحة المفاتيح كما هو موضح في الشكل:
يختلف كائن الحدث في IE عن الوصول إلى كائن الحدث في DOM. هناك عدة طرق مختلفة للوصول إلى كائن الحدث في IE، اعتمادًا على كيفية تحديد معالج الحدث. في IE، يوجد كائن الحدث كسمة لكائن النافذة. يمكنك استخدام window.event للحصول على كائن الحدث. عند استخدام AttachEvent()، سيتم أيضًا تمرير كائن الحدث في المعالج، أو يمكن استخدامه الطريقة السابقة. فيما يلي حالة للتوضيح: عندما يكون الماوس على المربع، تعرض العلامة p أدناه الإحداثيات الحالية للماوس.
تقديم:
مخطط الكود:
فقاعة الحدث (الفقاعة): يشير ما يسمى بالفقاعة إلى الانتشار التصاعدي للأحداث. عندما يتم تشغيل حدث على عنصر سليل، سيتم أيضًا تشغيل نفس الحدث على عنصر سلفه. تكون الفقاعات مفيدة في معظم مواقف التطوير. إذا كنت لا تريد حدوث الفقاعات، يمكنك إلغاء الفقاعات من خلال كائن الحدث events.cancelBubble=true.
تقديم:
مخطط الكود:
تفويض الأحداث: يشير إلى الأحداث المرتبطة بعناصر السلف المشتركة للعناصر، بحيث عندما يتم تشغيل حدث على عنصر سليل، فإنه سينتقل إلى عنصر السلف، وستتم معالجة الحدث من خلال وظيفة استجابة السلف عنصر. يستخدم تفويض الأحداث التفويض الذي يمكن أن يقلل من عدد روابط الأحداث ويحسن أداء البرنامج. هدف السمة لكائن الحدث: إرجاع العنصر الذي أدى إلى تشغيل هذا الحدث (العقدة الهدف للحدث)
قضية:
تقديم:
مخطط الكود:
ربط الأحداث: يمكننا ربط معالجات الأحداث بعنصر ما بطريقتين شائعتين: الربط عن طريق تحديد سمات الحدث لعناصر HTML؛ والربط عن طريق تحديد سمات كائنات DOM. هناك طريقة خاصة أخرى تسمى إعداد مستمع الحدث، كائن العنصر: addEventListener(). يمكن للطريقتين الأولين ربط معالجات الأحداث، لكن عيب كل منهما هو أنه بإمكانهما ربط برنامج واحد فقط، ولا يمكن ربط برامج متعددة لحدث واحد. addEventListener()، من خلال هذه الطريقة يمكنك أيضًا ربط دالة استجابة بعنصر ما. استخدم addEventListener() لربط وظائف استجابة متعددة بنفس الحدث لعنصر ما في نفس الوقت. بهذه الطريقة، عند تشغيل الحدث، سيتم تنفيذ وظيفة الاستجابة بترتيب ربط الوظيفة. هذه الطريقة لا تدعم المتصفحات IE8 والإصدارات الأقدم، وتحتاج إلى استخدام AttachEvent بدلاً من ذلك. AttachEvent()، في IE8 يمكنك استخدام AttachEvent() لربط الأحداث. يمكن لهذه الطريقة أيضًا ربط وظائف معالجة متعددة بحدث ما في نفس الوقت، والفرق هو أن ترتيب التنفيذ يكون معاكسًا لـ addEventListener().
نشر الحدث: يمكن تقسيم نشر الحدث إلى ثلاث مراحل: مرحلة الالتقاط - في مرحلة الالتقاط، يتم التقاط الأحداث من عنصر السلف الخارجي إلى العنصر المستهدف، ولكن بشكل افتراضي لن يتم تشغيل الحدث في هذه المرحلة المستهدفة - يتم التقاط الحدث، ويبدأ العنصر المستهدف في تشغيل الأحداث على العنصر الهدف بعد اكتمال مرحلة الالتقاط - يتم نقل الحدث من العنصر المستهدف إلى العناصر السلفية، مما يؤدي إلى تشغيل الأحداث على العناصر السلفية بدورها.
أحداث لوحة المفاتيح: onkeydown: حدث الضغط على لوحة المفاتيح. إذا واصلت الضغط على المفتاح دون تحريره، فسيتم دائمًا تشغيل الحدث. عندما يتم تشغيل حدث onkeydown بشكل مستمر، ستكون الفترة الفاصلة بين المرتين الأولى والثانية أطول قليلاً، وستكون المرات الأخرى سريعة جدًا. وهذا لمنع سوء الاستخدام. onkeyup: حدث عند تحرير لوحة المفاتيح. ترتبط أحداث لوحة المفاتيح عمومًا ببعض الكائنات التي يمكنها الحصول على التركيز أو المستندات...
ما ورد أعلاه هو ملخص موجز لتفاصيل أحداث JavaScript، لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على شبكة التعليمات البرمجية المصدر!