1. تدفق الحدث
الترتيب الذي يقوم فيه عنصر HTML بتأسيس الأحداث.
2. يسمى تيار الأحداث في فقاعة الأحداث IE فقاعة الحدث ، مما يعني أن الحدث يبدأ بالعنصر الأكثر تحديداً (العقدة ذات أعمق مستوى تعشيش في المستند) ، ثم ينتشر لأعلى خطوة بخطوة إلى العقدة الأقل تحديدًا (المستند). 3. التقاط الأحداث تتمثل فكرة التقاط الأحداث في أن العقد الأقل تحديدًا يجب أن تتلقى الأحداث في وقت مبكر ، في حين يجب أن تتلقى العقد الأكثر تحديدًا العقد في النهاية. الغرض من التقاط الأحداث هو التقاط الحدث قبل أن يصل إلى الهدف المحدد مسبقًا.
دفق الحدث DOM
يتضمن تدفق الحدث المحدد في "تدفق حدث DOM2" ثلاث مراحل: مرحلة التقاط الحدث ، والمرحلة المستهدفة ، ومرحلة الفقاعة. أول ما يحدث هو التقاط الحدث ، والذي يوفر فرصة لاعتراض الأحداث. ثم يستقبل الهدف الفعلي الحدث. المرحلة الأخيرة هي مرحلة الفقاعة ، حيث يمكن الرد على الأحداث. أخذ صفحة HTML بسيطة كمثال ، فإن النقر فوق عنصر <viv> سيؤدي إلى تشغيل الأحداث بالترتيب الموضح أدناه.
في دفق الأحداث DOM ، لا يتلقى الهدف الفعلي (<Div>) الأحداث أثناء مرحلة الالتقاط. هذا يعني أنه خلال مرحلة الالتقاط ، يتوقف الحدث بعد المستند إلى <html> ثم إلى <body>. المرحلة التالية هي المرحلة "المستهدفة" ، لذلك يحدث الحدث على <viv> ويعتبر جزءًا من مرحلة الفقاعة في معالجة الأحداث. ثم تحدث مرحلة الفقاعة وينتشر الحدث إلى المستند.
معظم المتصفحات التي تدعم تدفق أحداث DOM تنفذ سلوكًا محددًا ؛ على الرغم من أن مواصفات "حدث DOM2" تتطلب بوضوح أن مرحلة الالتقاط لن تتضمن هدف الحدث ، Safari ، Chrome ، Firefox ، و Opera9.5 ، وبعد ذلك ستؤدي إلى حدوث أحداث على كائنات الأحداث خلال مرحلة التقاط. نتيجة لذلك ، هناك فرصان لتشغيل الأحداث على الكائن المستهدف.
توقف عن الأحداث من الفقاعات
تجربة
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javaScript"> function onbtn () {Alert ('button') ؛ // cancelbuble () ؛ منع فقاعات الأحداث} // الحصول على وظيفة كائن الحدث getEvent () {// إذا كان IE أو Chromeif (window.event) {return window.event ؛} // for firefoxfunc = getevent.caller ؛ // الحصول على وظيفة المتصل بينما (func! = null) {var arg0 = funC.Arguments [0] ؛ // احصل على المعلمة الأولى للمتصل // الحكم على ما إذا كانت المعلمة فارغة إذا (arg0) {// ugge ما إذا كان Arg0 هو كائن حدث if ((arg0.constructor == event || arg0.constructor == mouseevent || arg0.constructor == KeyboardEvent) Arg0.StopPropagation)) {return arg0 ؛ }} // الحصول على func caller func = func.caller ؛} return null ؛} // block function function function cancelbubble () {event = getEvent () ؛ // firefox chrome if (event.preventDefault) {event.preventDefault () ؛ event.stoppropagation () ؛ } آخر {// ie event.cancelBubble = true ؛ Event.ReturnValue = false ؛ }} </script> </head> <body onClick = "Alert ('body')"> <div onClick = "Alert ('div') ؛" style = "background-color: green"> <button onClick = "OnBtn ()"> dsd </utton> </viv> </body> </html>يتم تنفيذ رمز HTML أعلاه بترتيب الحدث الذي يثير.
الافتراضي: "الزر" سوف يطفو على السطح --- سوف يظهر "Div" ----》 سوف يطفو على السطح "الجسم"
إذا قمت بإضافة رمز CancelBubble (): سوف يظهر فقط "زر"
المقالة أعلاه لديها فهم عميق لآلية حدث JS DOM. إنه كل المحتوى الذي شاركته معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.