في الآونة الأخيرة ، لأنني يجب أن أقوم بتعديل موقع الويب كل يوم لصنع مؤثرات خاصة لموقع الويب ، فقد شاهدت الكثير من حوادث اتصال JS. أنا أعرف فقط كيفية استخدام جزء صغير منه. في بعض الأحيان يكون أيضًا فوضويًا جدًا عندما أستخدمه. الآن قمت بفرزها. سأشاركها مع منصة شبكة Wulin للرجوع إليها!
1. ما هو حدث جافا سكريبت؟
الأحداث هي قلب تطبيقات JavaScript و Glue التي تلمع كل شيء معًا. عندما يكون لدينا أنواع معينة من التفاعلات مع صفحات الويب في المتصفح ، تحدث الأحداث.
قد تكون الأحداث تنقر على محتوى معين ، أو تمرير عنصر معين ، أو الضغط على مفاتيح معينة على لوحة المفاتيح ، وقد تكون الأحداث أيضًا شيئًا يحدث في متصفح الويب ، مثل تحميل صفحة ويب معينة ، أو يقوم المستخدم بتمرير النافذة أو تغيير حجم النافذة. بعبارة صريحة ، فإن الأحداث هي لحظات تفاعل محددة تحدث في وثيقة أو متصفح!
باستخدام JavaScript ، يمكنك الاستماع إلى أحداث محددة وتحديد أن بعض الأحداث تحدث استجابة لها.
2. تدفق الحدث
يصف تدفق الحدث ترتيب الأحداث المقبولة في الصفحة. في المراحل المبكرة من تطوير المتصفح ، قاتل اثنان من مصنعي المستعرضين الرئيسيين ، IE و Netscape بعضهما البعض ، وحدث وضع الغش ، أي أن تفسيرها لتدفق الأحداث أظهر تعريفتين معاكستين تمامًا. هذا هو ما نعرفه: أي فقاعات الأحداث ، التقاط أحداث Netscape. دعنا نلتقط صورة أولاً ونلقي نظرة موجزة على الهيكل:
1. فقاعات الأحداث
تعني فقاعات الأحداث أن هذا الحدث يتم استلامه لأول مرة بواسطة العنصر الأكثر تحديداً (العقدة ذات أعمق مستوى التعشيش في المستند) ، ثم ينتشر لأعلى خطوة بخطوة إلى العقدة الأقل تحديدًا (المستند). خذ الرسم البياني أعلاه لتوضيح أنه عند النقر على جزء النص ، يتم استلامه لأول مرة بواسطة العنصر في النص ، ثم ينتشر إلى النافذة خطوة بخطوة ، أي أن عملية 6-7-8-10 يتم تنفيذها.
2. التقاط الحدث
يعني التقاط الحدث أن الحدث يتم استلامه لأول مرة بواسطة عقدة أقل تحديدًا ، وتتلقى العقدة الأكثر تحديداً الحدث أخيرًا. وبالمثل ، في النموذج أعلاه ، عند النقر فوق جزء النص ، يتم استلامه لأول مرة بواسطة النافذة ، ثم ينتشر إلى عنصر النص خطوة بخطوة ، أي أن عملية 1-2-3-4-5 يتم تنفيذها.
كيف يتم تنفيذها في الكود؟ أعطى لاحقًا!
3. ثلاث طرق للتعامل مع حدث JavaScript
عندما يحدث حدث ما ، يتعين علينا التعامل معه. هناك ثلاث طرق رئيسية للتعامل مع معالجات أحداث JavaScript:
1. HTML معالج الأحداث
أي أن نضيف معالجات الأحداث مباشرة إلى رمز HTML ، مثل الرمز التالي:
<input id = "btn" value = "button" type = "button" onClick = "ShowMsg () ؛"> <script> function showmsg () {Alert ("html إضافة معالجة الأحداث") ؛ } </script>من الكود أعلاه ، يمكننا أن نرى أن معالجة الأحداث متداخلة مباشرة في العناصر. هناك مشكلة في هذا: الاقتران بين كود HTML و JS قوي للغاية. إذا كنت ترغب في تغيير ShowmsG في JS في يوم من الأيام ، فأنت لا تحتاج فقط إلى تعديلها في JS ، ولكن تحتاج أيضًا إلى تعديلها في HTML. يمكننا قبول تعديلين أو تعديلين ، ولكن عندما يصل الرمز الخاص بك إلى مستوى 10،000 سطر ، سيكلف الأشخاص والمال لتعديله. لذلك ، لا نوصي بهذه الطريقة.
2. معالج أحداث مستوى DOM0
أي إضافة معالجة الأحداث إلى الكائن المحدد ، راجع الكود التالي:
<input id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById ("btn") ؛ btn.onclick = function () {Alert ("معالجة الأحداث الإضافة على مستوى DOM") ؛ } btn.onclick = null ؛ // إذا كنت تريد حذف حدث انقر فوق BTN ، فقم بتعيينه على NULL </script>من الكود أعلاه ، يمكننا أن نرى أن الاقتران بين الأحداث على مستوى DOM0 ورمز HTML ورمز JS قد تم تقليله إلى حد كبير مقارنة مع معالجات الأحداث HTML. ومع ذلك ، لا يزال المبرمجين الأذكياء غير راضين ويأملون في إيجاد طريقة أبسط للتعامل معها. دعونا نلقي نظرة على الطريقة الثالثة.
3. معالج الأحداث على مستوى DOM2
تقوم DOM2 أيضًا بإضافة معالجات الأحداث إلى كائنات محددة ، ولكنها تتضمن بشكل أساسي طريقتين ، يتم استخدامها للتعامل مع عمليات تحديد وحذف معالجات الأحداث: AddeventListener () وإزالة ExmentEventListener (). يتلقون جميعًا ثلاث معلمات: اسم الحدث المراد معالجته ، والوظيفة كمعالج الأحداث ، وقيمة منطقية (سواء تمت معالجة الحدث في مرحلة الالتقاط) ، راجع الكود التالي:
<input id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById ("btn") ؛ BTN.AddeventListener ("Click" ، Showmsg ، false) ؛ // هنا قمنا بتعيين القيمة الأخيرة على خطأ ، أي أنه لا تتم معالجته في مرحلة الالتقاط. بشكل عام ، تكون معالجة الفقاعات أكثر توافقًا في كل وظيفة متصفح ShowmsG () {Alert ("DOM-LEVEL ADD HADALLER") ؛ } btn.removeeventListener ("انقر" ، ShowMsg ، false) ؛ // إذا كنت تريد حذف هذا الحدث ، فأنت بحاجة فقط إلى تمرير نفس المعلمة </script>هنا يمكننا أن نرى أنه عند إضافة وإزالة الأحداث ، تكون الطريقة الأخيرة أكثر مباشرة وأبسط. ومع ذلك ، يذكر MA Haixiang الجميع أنه عند معالجة الحدث الحذف ، يجب أن تكون المعلمات التي تم تمريرها متسقة مع المعلمات السابقة ، وإلا فإن الحذف سيكون غير صالح!
4. العملية والفرق بين فقاعات الأحداث والتقاط الأحداث
بعد قولي هذا ، اسمحوا لي أن أقدم لكم بعض التعليمات البرمجية لشرح عملية فقاعات الأحداث والتقاط الأحداث ، وفي الوقت نفسه ، دعك ترى الفرق بين الاثنين:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> وثيقة </title> <style> #p {width: px ؛ الارتفاع: px ؛ الحدود: px solid أسود ؛ www.mahaixiang.cn <div id = "c"> أحب www.mahaixiang.cn </div> </viv> <script> var p = document.getElementById ('p') ؛ var c = document.getElementById ('c') ؛ C.AdDeventListener ('click' ، function () {Alert ('Child Node Capture')} ، true) ؛ C.AdDeventListener ('click' ، function () {Alert ('child node bubbles')} ، false) ؛ P.AdDeventListener ('click' ، function () {Alert ('child node bubbles')} ، false) ؛ </script> </body> </html>عند تشغيل الكود أعلاه والنقر فوق العنصر الطفل ، سنجد أن ترتيب التنفيذ هو: فقاعة عقدة Capture-Child Capture-Child Capture-Child. من هذا المثال ، يمكننا أن نفهم أنه بالإضافة إلى ذلك ، ينص حدث مستوى DOM2 على أن الأحداث تتضمن ثلاث مراحل:
1. مرحلة التقاط الحدث ؛
2. في المرحلة المستهدفة ؛
3. مرحلة فقاعة الحدث.
أولاً ، يتم التقاطه ، ثم في المرحلة المستهدفة (أي ، إلى الموقع الذي يتم فيه إصدار الحدث) ، وأخيراً يتم قفزته. ما هو غير علمي هو أنه لا يوجد برنامج معالجة الأحداث على مستوى DOM1. يرجى الانتباه والتوقف عن صنع النكات!
5. ملحق
1. يحتوي معالج حدث IE أيضًا على طريقتان: Accuptevent () يضيف الأحداث و detachevent () يحذف الأحداث. تتلقى هاتان الطريقتان نفس المعلمتين: اسم معالج الحدث ووظيفة معالجة المعاملات. لماذا لا توجد قيمة منطقية هنا؟ لأن IE8 والإصدارات السابقة تدعم فقاعات الأحداث فقط ، فإن المعلمة الأخيرة تعادل خطأً بشكل افتراضي للتعامل! (تشمل المتصفحات التي تدعم معالجات أحداث IE IE ، أوبرا).
2. كائنات الأحداث هي كائنات تستخدم لتسجيل المعلومات ذات الصلة عند حدوث بعض الأحداث ، ولكن سيتم إنشاء كائنات الأحداث فقط عند حدوث الأحداث ، ولا يمكن الوصول إليها داخليًا إلا من خلال وظيفة معالج الأحداث. بعد جميع وظائف معالج الأحداث ، يتم تدمير كائن الحدث!
ما سبق هو الطريقة للتعامل مع أحداث JavaScript (ثلاثة أنواع) قدمت لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك!