القراءات ذات الصلة:
ملخص تعلم حدث JavaScript (V) نوع حدث الماوس في JS
//www.vevb.com/article/86259.htm
ملخص تعلم حدث JavaScript (ط) تدفق الحدث
//www.vevb.com/article/86261.htm
ملخص تعلم الأحداث JavaScript (4) أعضاء الحدث العام (الخصائص والأساليب)
//www.vevb.com/article/86262.htm
ملخص تعلم حدث JavaScript (II) معالج الأحداث JS
//www.vevb.com/article/86264.htm
ملخص تعلم الأحداث JavaScript (III) كائن حدث JS
1. الأحداث
الحدث هو إجراء معين يقوم به المستخدم أو المتصفح نفسه ، مثل Click و Load و Mouseover كلها أسماء الحدث.
الأحداث هي الجسر بين JavaScript و DOM.
إذا قمت بالتشغيل ، فسوف أقوم بتنفيذ الحدث ، وأتصل بوظيفة المعالجة الخاصة به لتنفيذ رمز JavaScript المقابل لإعطاء الاستجابة.
الأمثلة النموذجية هي: يتم تشغيل حدث التحميل بعد تحميل الصفحة ؛ ينقر المستخدم على العنصر ويؤدي إلى حدوث حدث نقرة.
2. تدفق الحدث
1. الوعي بالأنفلونزا للأحداث
سؤال: انقر على عنصر الصفحة ، ما نوع العنصر الذي يمكن أن يشعر به مثل هذا الحدث؟
الإجابة: أثناء النقر على عنصر ما ، يمكنك أيضًا النقر فوق عنصر حاوية العنصر ، أو حتى الصفحة بأكملها.
مثال: هناك ثلاث دوائر متحدة المركز ، أضف وظيفة معالجة الأحداث المقابلة إلى كل دائرة ، ويظهر النص المقابل. انقر فوق الدائرة الأعمق وانقر أيضًا على الدائرة الخارجية ، بحيث يتم أيضًا تشغيل حدث النقر للدائرة الخارجية.
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position: absolute ؛ العرض: 400 بكسل ؛ الارتفاع: 400 بكسل ؛ أعلى: 0 ؛ اليسار: 0 ؛ أسفل: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ لون الخلفية: Deeppink ؛ } #middle {position: absolute ؛ العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ أعلى: 50 ٪ ؛ الهامش اليساري: -150 بكسل ؛ الهامش: -150 بكسل ؛ لون الخلفية: DeepSkyBlue ؛ } #inner {position: absolute ؛ العرض: 100px ؛ الارتفاع: 100px ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ الهامش اليساري: -50px ؛ الهامش: -50px ؛ خلفية اللون: Darkgreen. محاذاة النص: المركز ؛ رفع الخط: 100px ؛ اللون: أبيض. }#OUTER ،#middle ،#inner {border-radius: 100 ٪ ؛ } </style> <body> <div id = "Outer"> <div id = "middle"> <div id = "inner"> انقر فوق! </viv> </viv> </viv> <script> var innercircle = document.getElementById ("inner") ؛ innercircle.onclick = function () {Alert ("innercircle") ؛ } ؛ var middleCircle = document.getElementById ("middle") ؛ middleCircle.onclick = function () {Alert ("middleCircle") ؛ } var outerCircle = document.getElementById ("Outer") ؛ OuterCircle.onclick = function () {Alert ("OuterCircle") ؛ } </script> </body> </html>الآثار هي كما يلي:
2. تدفق الحدث
عند حدوث حدث ما ، سيتم نشره بترتيب محدد بين عقدة العنصر وعقدة الجذر. جميع العقد التي تمر عبر المسار ستتلقى الحدث. عملية الانتشار هذه هي دفق الأحداث DOM.
يتوافق ترتيب انتشار الأحداث مع نماذج دفق الأحداث الخاصة بالمستعرض: Capture Event Tream و Bubble Event Tream.
دفق الأحداث الفقاعي: إن نشر الأحداث هو من هدف الأحداث الأكثر تحديداً إلى هدف الحدث الأقل تحديدًا. وهذا هو ، من أوراق شجرة دوم إلى الجذر.
دفق الحدث الذي تم التقاطه: إن نشر الأحداث هو من أقل هدف حدث محدد إلى هدف الحدث الأكثر تحديداً. وهذا هو ، من جذور شجرة دوم إلى الأوراق.
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "mydiv"> انقر فوق! </div> </body> </html>
في رمز HTML أعلاه ، انقر فوق عنصر <viv> في الصفحة.
في دفق الحدث الفقاعي ، انقر فوق أمر انتشار الحدث هو <viv> -》 <body> -》 <html> - وثيقة》
في دفق الحدث الذي تم التقاطه ، انقر فوق أمر انتشار الحدث هو المستند -》 <html> -》 <body> -》 <viv>
ملحوظة:
1) تدعم جميع المتصفحات الحديثة فقاعات الأحداث ، ولكن هناك اختلافات طفيفة في تطبيقات محددة:
في IE5.5 وأقدما ، ستتخطى فقاعات الأحداث عنصر <html> (القفز مباشرة من الجسم إلى المستند).
IE9 و Firefox و Chrome و Safari Bubble أحداث وصولاً إلى كائن النافذة.
2) IE9 ، Firefox ، Chrome ، Opera ، و Safari جميع الدعم. على الرغم من أن معيار DOM يتطلب أن يتم نشر الأحداث من كائنات المستندات ، إلا أن هذه المتصفحات تبدأ في التقاط الأحداث من كائنات النوافذ.
3) نظرًا لأن المتصفحات القديمة لا تدعمها ، فإن قلة من الناس يستخدمون التقاط الأحداث. يوصى باستخدام فقاعات الأحداث.
دفق الحدث DOM
يستخدم DOM Standard Capture + Bubling. يؤدي كلا تدفقات الحدث إلى جميع كائنات DOM ، بدءًا من كائن المستند وينتهي بكائن المستند.
ينص DOM Standard على أن تدفق الحدث يتضمن ثلاث مراحل: مرحلة التقاط الأحداث ، في المرحلة المستهدفة ، ومرحلة فقاعة الأحداث.
مرحلة التقاط الحدث: لن يتلقى الهدف الفعلي (<viv>) الأحداث خلال مرحلة الالتقاط. وهذا هو ، في مرحلة الالتقاط ، يتوقف الحدث من المستند إلى <html> ثم إلى <body>. في الصورة أعلاه ، هو 1 ~ 3.
في المرحلة المستهدفة: يحدث الحدث ويتم معالجته على <viv>. ولكن سيتم معالجة الأحداث كجزء من مرحلة الفقاعات.
مرحلة الفقاعة: تنشر الأحداث مرة أخرى إلى المستند.
ملحوظة:
1): ينص معيار DOM على أن التقاط مرحلة التقاط الحدث يتضمن أهدافًا للأحداث ، ولكن سيتم تعيين الأحداث على كائنات الأحداث في IE9 ، Safari ، Chrome ، Firefox ، Opera9.5 ، وتبدأ الإصدارات اللاحقة الأحداث في كائنات الأحداث خلال مرحلة الالتقاط. نتيجة لذلك ، هناك فرصان لتشغيل الأحداث على الكائن المستهدف.
2): لا تمر كل الأحداث بمرحلة الفقاعة. تمر جميع الأحداث بمرحلة الالتقاط وهي في المرحلة المستهدفة ، ولكن بعض الأحداث تتخطى مرحلة الفقاعة: على سبيل المثال ، حدث التركيز الذي يحصل على تركيز الإدخال وحدث Blur الذي يفقد تركيز المدخلات.
مثال على فرصتين لتشغيل الأحداث على الكائن المستهدف:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position: absolute ؛ العرض: 400 بكسل ؛ الارتفاع: 400 بكسل ؛ أعلى: 0 ؛ اليسار: 0 ؛ أسفل: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ لون الخلفية: Deeppink ؛ } #middle {position: absolute ؛ العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ أعلى: 50 ٪ ؛ الهامش اليساري: -150 بكسل ؛ الهامش: -150 بكسل ؛ لون الخلفية: DeepSkyBlue ؛ } #inner {position: absolute ؛ العرض: 100px ؛ الارتفاع: 100px ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ الهامش اليساري: -50px ؛ الهامش: -50px ؛ خلفية اللون: Darkgreen. محاذاة النص: المركز ؛ رفع الخط: 100px ؛ اللون: أبيض. }#OUTER ،#middle ،#inner {border-radius: 100 ٪ ؛ } </style> <body> <div id = "Outer"> <div id = "middle"> <div id = "inner"> انقر فوق! </viv> </viv> </viv> <script> var innercircle = document.getElementById ("inner") ؛ innercircle.addeventListener ("Click" ، function () {Alert ("innercircle click event ape ref in the capture stage") ؛} ، true) ؛ innercircle.addeventListener ("Click" ، function () {Alert ("innercircle click event refired in the Bubble Stage") ؛} ، false) ؛ var middleCircle = document.getElementById ("middle") ؛ middlecircle.addeventListener ("Click" ، function () {Alert ("تم إطلاق حدث نقرة MiddleCircle في مرحلة الالتقاط") ؛} ، صحيح) ؛ middlecircle.addeventListener ("Click" ، function () {Alert ("تم إطلاق حدث نقرة MiddleCircle في مرحلة الفقاعة") ؛} ، خطأ) ؛ var outerCircle = document.getElementById ("Outer") ؛ OuterCircle.AddeventListener ("Click" ، function () {Alert ("OuterCircle النقر يتم إطلاقه في مرحلة الالتقاط") ؛} ، صحيح) ؛ OuterCircle.adDeventListener ("Click" ، function () {Alert ("OuterCircle النقر يتم إطلاق حدث في مرحلة الفقاعة") ؛} ، خطأ) ؛ </script> </body> </html>تأثير التشغيل هو أن 6 صناديق ستظهر واحدة تلو الأخرى. لشرح المبدأ ، قمت بدمجه في صورة:
3. التطبيق النموذجي لتدفق الحدث - وكيل الأحداث
في معالجة الأحداث التقليدية ، يجب إضافة معالج الأحداث إلى كل عنصر. JS Event Proxy هي تقنية بسيطة وفعالة ، يمكنك من خلالها إضافة معالج الأحداث إلى عنصر الأصل ، وبالتالي تجنب إضافة معالج الأحداث إلى عناصر الأطفال المتعددة.
يستخدم مبدأ وكيل الأحداث فقاعات الأحداث والعناصر المستهدفة ، وإضافة معالج الأحداث إلى العنصر الأصل ، وانتظر العنصر الطفل إلى أحداث الفقاعات ، ويمكن للعنصر الأصل تحديد العنصر الطفل من خلال الهدف (أي هو srcelement) ، وبالتالي إجراء المعالجة المقابلة. لمزيد من المحتوى حول الهدف ، يرجى الرجوع إلى الأمثلة التالية للأعضاء العامين (الخصائص والأساليب) للحدث (4) للأمثلة التالية.
معالجة الأحداث التقليدية ، وإضافة معالج الأحداث إلى كل عنصر ، فإن الكود كما يلي:
<Body> <ul id = "color-list"> <li> أحمر </li> <li> البرتقالي </li> <li> أصفر </li> <li> أخضر </li> <li> أزرق </li> <li> IndiGo </li> <li> Purple </li> </ul> <script> colorlist. }}) () ؛ </script> </body>
طريقة معالجة وكيل الأحداث هي كما يلي:
<Body> <ul id = "color-list"> <li> أحمر </li> <li> البرتقال </li> <li> أصفر </li> <li> أخضر </li> <li> أزرق </li> <li> Indigo </li> <li> Purple </li> </ul> <script> (Function () {var colorlist = document.getelementby-liber ") ؛ colorlist.addeventListener ("انقر" ، }}) () ؛ </script> </body>لتلخيص فوائد وكيل الأحداث:
أ. قلل معالجات الأحداث المتعددة إلى واحد ، لأن معالج الأحداث يجب أن يقيم في الذاكرة ، مما يحسن الأداء. تخيل لو كان هناك طاولة 100 صف ، ومقارنة الطريقة التقليدية لعلاج معالجات الأحداث لكل خلية مع وكيل الأحداث (أي إضافة معالج الأحداث إلى الجدول) ، ليس من الصعب استنتاج أن وكيل الأحداث يتجنب بعض المخاطر المحتملة وتحسين الأداء.
ب. لا يتطلب تحديث DOM إعادة ربط معالج الأحداث ، لأن وكيل الحدث يمكنه تبني طرق معالجة مختلفة لعناصر الأطفال المختلفة. إذا تمت إضافة عناصر الأطفال الأخرى (A ، span ، div ، إلخ) ، يمكنك تعديل وظيفة معالج الأحداث مباشرة لعامل الحدث. ليست هناك حاجة لإعادة ربط المعالج ولا حاجة إلى الحلقة مرة أخرى.
ما ورد أعلاه هو ملخص تعلم الأحداث JavaScript (1) المعرفة المتعلقة ببث الأحداث الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!