الأحداث هي طريقة تنفيذ للبرمجة غير المتزامنة ، والتواصل بشكل أساسي بين المكونات المختلفة للبرنامج ، ويدعم DOM عددًا كبيرًا من الأحداث ؛
تستخدم هذه المقالة هذه النقاط لتحليل المبادئ الأساسية لمعالجة الأحداث بالتفصيل: نوع الحدث ، هدف الحدث ، معالج الأحداث ، كائن الحدث ، انتشار الحدث
أخيرًا ، سأقدم لك كائن الحدث لك ؛
1. نوع الحدث: هي سلسلة صغيرة كاملة تستخدم للإشارة إلى نوع الحدث الذي حدث ، مثل "Mouseover"
أنواع الأحداث التقليدية: أحداث النماذج ، أحداث النوافذ ، أحداث الماوس ، أحداث لوحة المفاتيح ، أحداث DOM ، أحداث HTML5 ، شاشة تعمل باللمس وأحداث الأجهزة المحمولة ، إلخ.
2. هدف الحدث: الكائن الذي يثير الحدث
3. مستمع الحدث: وظيفة تتعامل أو تستجيب للأحداث. عندما يقوم كائن بإعداد حدث ما ، سيقوم المتصفح تلقائيًا بالاتصال بالوظيفة المسجلة على الكائن ؛
سجل معالج الأحداث (استمع إلى الأحداث):
1. سجل كسمات HTML (سيتم تشغيله فقط في مرحلة الفقاعات) مثل <table id = "t" onClick = "ModifyText () ؛"> ؛ وعادة ما يتم تشغيل بعض أنواع الأحداث مباشرة على المتصفح بدلاً من أي عنصر مستند محدد. يتم وضع معالجات الأحداث هذه على علامة <Body> ، لكن المتصفح سيقوم بتسجيلها على كائن النافذة ، مثل <body Onload = "Alert ('Hello World!)"> ، وتشمل هذه الأحداث:
onafterprint onfocus ononline onresize onbeforeprint onhashchange
onpagehide onstorage onbeforeunload onload onpageshow onundo
onblur onMessage onpopstate onUnload Oneerror Onoffline Onredo
قيمة الحدث كسمة HTML هي سلسلة رمز JS ، وهي هيئة وظيفة المعالجة ولا تحتوي على {}. ملاحظة: حاول عدم تسجيل الأحداث على أي علامات HTML أخرى ، فهي تنتهك مبدأ فصل كود HTML و JavaScript. إذا كانت وظيفة الحدث قد تنقر على عنصر كائن الحدث قبل تحميله ، فسيؤدي ذلك إلى حدوث خطأ ؛
2. سجل كسممة لعنصر DOM (سيتم تشغيله فقط في مرحلة الفقاعة). في هذا الوقت ، يجب أن يكون اسم سمة معالج الأحداث مسبوقة بـ "ON". هذه الطريقة متوافقة مع جميع المتصفحات. العيب الوحيد هو أنه يمكنه تسجيل وظيفة معالج الأحداث الواحدة فقط. إذا تم تعريف سمة OnClick مرتين ، فسيقوم التعريف الأخير بالكتابة فوق الواجهة السابقة ؛ على سبيل المثال: window.onload = function () {...} ؛
3. في جميع المتصفحات باستثناء IE8 والإصدارات السابقة ، يتم تعريف عمليات الحدث (الاستماع والتشغيل) من DOM في واجهة EventTarget. يتم نشر هذه الواجهة لعقدة العنصر وعقدة المستند وكائن النافذة. بالإضافة إلى ذلك ، فإن الكائنات المدمجة للمتصفح مثل XMLHTTPrequest و Audionode و AudioconText وما إلى ذلك قد نشرت أيضًا هذه الواجهة. هناك ثلاث طرق لهذه الواجهة ، يتم استخدام AddeventListener و RemoveEventListener لربط وظائف المستمع وإزالتها ، ويتم استخدام الإرسال لإعداد الأحداث ؛
يتم استخدام طريقة AddEventListener (النوع ، المستمع ، منطقية) لتسجيل المستمع. المعلمة الثالثة تحدد طريقة انتشار الحدث. عادةً ما يتم استخدام القيمة الافتراضية الخاطئة ، مما يعني أن وظيفة الاستماع يتم تشغيلها فقط في مرحلة الفقاعة (Pupple). عندما يتم ضبطه على صحيح ، فهذا يعني أن وظيفة الاستماع يتم تشغيلها في مرحلة الالتقاط (الالتقاط) ؛ يمكن تسجيل أي مستمعين متعددين لنفس الحدث النوع على نفس الكائن ، وسيتم تشغيل جميع المستمعين في أمر التسجيل (سيتم تجاهل المستعرضات التسجيل من قبل المتصفح) ؛
إذا كنت ترغب في نقل المعلمات إلى وظيفة الاستماع ، فيمكنك لف وظيفة الاستماع مع وظائف مجهولة ، مثل Elm.AdDeventListener ('click' ، function () {annist ('Real Pixment')} ، false) ؛
عندما يكون المستمع المسجل هو متغير مرجعي للوظيفة ، يمكنك استخدام RemoveEventLestener (النوع ، المستمع ، المنطقي) لحذف المستمع على هدف الحدث. يجب حذف أحداث الفقاعات وأحداث التقاط نفس حدث الاستماع بشكل منفصل ، ولا يتدخل الاثنان مع بعضهما البعض ؛
var div = document.getElementById ('div') ؛ var leader = function (event) { / * افعل شيئًا هنا * /} ؛ div.addeventListener ("انقر" ، مستمع ، خطأ) ؛ Div.RemoveEventListener ("انقر" ، مستمع ، خطأ) ؛تعمل طريقة الإرسال (الحدث) على الحدث المحدد يدويًا على العقدة الحالية ، مما يؤدي إلى تنفيذ وظيفة الاستماع. هذه الطريقة إرجاع قيمة منطقية. طالما استدعاء وظيفة الاستماع Event.PreventDefault () ، فإنها تعيد خطأ. وإلا فهذا صحيح. المعلمة هي مثيل لكائن الحدث. لا يمكن أن تكون المعلمة فارغة ويجب أن تكون كائن حدث صالح ، وإلا سيتم الإبلاغ عن خطأ.
btn.addeventListener ("انقر" ، مستمع ، خطأ) ؛
var e = حدث جديد ("انقر فوق") ؛
btn.dispatchevent (e) ؛ // يتم تشغيل حدث النقر على الفور على BTN ، وسيتم استدعاء المستمع على الفور
يحدد المثال التالي ما إذا كان قد تم إلغاء الحدث بناءً على قيمة إرجاع طريقة الإرسال.
var dected =! btn.dispatchevent (event) ؛
if (تم إلغاؤه) {console.log ('Event Cancel') ؛ }
else {console.log ("حدث لم يتم إلغاؤه") ؛ }}
4. IE8 والإصدارات السابقة تدعم فقط الملحق (النوع ، المستمع) و detachevent (النوع ، المستمع). استخدامهم و addeventListener مختلف: أ. لا يوجد سوى معلمتين ؛ ب. يجب أن يكون نوع المعلمة بادئة مع "ON" ؛ ج. يسمح بتسجيل متكرر لنفس حدث الاستماع وسيتم استدعاؤه ؛ د. هناك عيب في استخدام طريقة المرفق ، وهو أن قيمة هذا ستصبح كائن نافذة بدلاً من العنصر الذي يؤدي إلى حدوث الحدث ؛
مشكلات أمر الاتصال: 1). تسمى المعالجات المسجلة عن طريق إعداد خصائص الكائن أو سمات HTML دائمًا أولاً ؛
2). يتم استدعاء المعالجات المسجلة لدى AddEventListener في أمر التسجيل الخاص بهم ؛
3). قد يتم استدعاء المعالجات المسجلة مع ActaChevent في Legacy IE بأي ترتيب.
مشكلة قيمة الإرجاع:
1). قيمة الإرجاع لمعالج الأحداث مفيدة فقط للمعالج المسجل من خلال السمات. إن تسجيل قيمة إرجاع معالج الحدث عن طريق تعيين سمة الكائن أو سمة HTML إلى FALSE هو إخبار المتصفح بعدم تنفيذ العمليات الافتراضية المتعلقة بهذا الحدث. عندما يريد المتصفح القفز إلى صفحة جديدة ، يتم تشغيل حدث OnBeforeUnload لكائن النافذة. إذا كانت قيمة الإرجاع الخاصة بها عبارة عن سلسلة ، فستظهر في مربع الحوار تأكيد الاستعلام ؛
2 ). لإلغاء التشغيل الافتراضي للمتصفح ، يجب عليك الاتصال بطريقة PreventDefault () أو تعيين خاصية ReturnValue لكائن الحدث.
هذا يشير إلى المشكلة:
1). وظيفة الاستماع المحددة بواسطة طريقة AddEventListener ، يشير هذا الكائن الداخلي دائمًا إلى العقدة التي تؤدي إلى الحدث ؛
2). هذه وظيفة معالج الأحداث المسجلة بواسطة IE8 وأساليب المرفقات السابقة تشير إلى الكائن العالمي ؛
كل هذا الكائن المكتوب بالطريقة التالية يشير إلى عقدة العنصر.
element.onclick = print ؛
element.addeventListener ("انقر" ، طباعة ، خطأ)
element.onclick = function () {console.log (this.id) ؛}
<element onClick = "console.log (this.id)">
هذا الكائن بالطريقة التالية يشير إلى الكائن العالمي.
element.onclick = function () {dosomething ()} ؛
element.setattribute ('onClick' ، 'dosomething ()') ؛
<element onClick = "dosomething ()">
element.attachevent ('onclick' ، dosomething) // ie8
مشكلة الذاكرة: بالنسبة للرمز التالي ، سيتم إنشاء وظيفة مجهولة جديدة في كل حلقة ، وسيتم استهلاك الذاكرة أكثر وأكثر ؛ نظرًا لأنه لا يتم الاحتفاظ به للإشارة إلى الوظيفة المجهولة ، فلا يمكن تسميته RemoveEventListener ؛ لذلك ، يجب الاحتفاظ بمستمع المعلمة الثاني كمرجع لوظيفة حدث المعالجة ؛
لـ (i = 0 ؛ i <els.length ؛ i ++) {els [i] .addeventListener ("Click" ، function (e) {/*do something*/} ، false}) ؛ }وظائف الأدوات للأغراض العامة المتوافقة مع الأقدم IE:
تأكد من أن وظيفة الأداة هذه تضيف معالج الحدث إلى الكائن المستهدف للحدث
وظيفة addEvent (الهدف ، النوع ، func) {if (target.addeventListener) {target.addeventListener (type ، func ، false) ؛ } آخر {target.attachevent ('on'+type ، function (e) {// وظيفة المعالجة المسجلة بواسطة excalevent هنا ليست مرتبطة مرجع ، لذلك من المستحيل استخدام detachevent لحذف funcl return (الهدف ، e) ؛}) ؛ }}معالج الأحداث العام (بسبب IE8 والإصدارات السابقة ، يحتاج المعالج أثناء العمل كحدث إلى نافذة.
دالة func (الحدث) {var event = event || window.event ؛ var target = event.target || Event.Srcelement ؛ //...... الرمز}4. انتشار الحدث: إنها العملية التي يقرر بها المستعرض أي الكائن الذي يؤدي إلى معالج الحدث الخاص به.
يتضمن تدفق الحدث المحدد في "حدث DOM2" ثلاث مراحل: مرحلة التقاط الأحداث ==> في المرحلة المستهدفة ==> مرحلة فقاعة الأحداث. أول ما يحدث هو مرحلة التقاط الحدث (الانتشار من الطبقة الخارجية إلى الطبقة الداخلية) ، والتي توفر فرصة لجميع العقد التي يمر بها الحدث إلى أحداث اعتراض. ثم هناك حدث استقبال الهدف الفعلي (ينفذ في أمر التسجيل). المرحلة الأخيرة هي المرحلة الفقاعية (الفقاعات من الطبقة الداخلية إلى الطبقة الخارجية).
عندما يتم استدعاء عناصر الحاويات والعناصر المتداخلة ، يكون ذلك ، عندما يتم استدعاء معالجات الأحداث في مرحلة الالتقاط ، وفي مرحلة الفقاعة: ينفذ الحدث معالجات الأحداث بترتيب دفق الأحداث ، وعندما يكون الحدث في المرحلة المستهدفة ، يتم تحديد ترتيب مكالمات الأحداث بترتيب الكتابة في الحدث الربط
إذا كنت تريد أن يصل الحدث إلى عقدة معينة ولم تعد تنتشر ، فهناك طريقتان:
1. استخدم طريقة Event.StopPropagation () لكائن الحدث لمنع انتشار وظيفة الاستماع الحالية ؛
2. استخدم طريقة event.stopimmediatepropagation () لكائن الحدث لمنع انتشار جميع وظائف الاستماع للحدث الحالي على كائن الحدث الخاص به ؛
تفويض الأحداث: نظرًا لأن الأحداث ستنتشر صعودًا إلى العقدة الأصل في مرحلة الفقاعة ، يمكن تعريف وظيفة الاستماع للعقدة الفرعية على العقدة الأصل ، ويمكن أن تعالج وظيفة الاستماع للعقدة الأصل أحداثًا لعناصر أطفال متعددة بشكل موحد ؛
5. كائن الحدث (الحدث): بعد حدوث الحدث ، سيتم إنشاء كائن حدث وتمريره كمعلمة إلى وظيفة الاستماع. يوفر المستعرض أصلاً كائنًا حدثًا ، وجميع الأحداث هي مثيلات لهذا الكائن ، أو يرث كائن النمط. كائن الحدث نفسه هو مُنشئ يمكن استخدامه لإنشاء مثيلات جديدة.
var ev = حدث جديد ("look" ، {"bubbles": true ، "convalable": false}) ؛
document.dispatchevent (EV) ؛
يقبل مُنشئ الحدث معلمتين. المعلمة الأولى هي سلسلة ، تشير إلى اسم الحدث ؛ المعلمة الثانية هي كائن ، يشير إلى تكوين كائن الحدث. يمكن أن يكون لهذه المعلمة الخصائص التالية.
الفقاعات: القيمة المنطقية ، الاختيارية ، الافتراضية خاطئة ، تشير إلى ما إذا كان كائن الحدث مضطربًا.
قابلة للإلغاء: قيمة منطقية ، اختيارية ، افتراضية خاطئة ، تشير إلى ما إذا كان يمكن إلغاء الحدث.
خصائص كائن الحدث:
1. تتعلق بمرحلة الحدث:
الفقاعات: خاصية للقراءة فقط ، تُرجع قيمة منطقية ، مما يشير إلى ما إذا كان الحدث الحالي سيخفق. يمكن استدعاء وظائف مختلفة بناءً على ما إذا كان الحدث سيخفق.
مرحلة الحدث: إرجاع قيمة عدد صحيح (واحدة من 0،1،2،3) ، مما يشير إلى الوضع الحالي للحدث
<0 ، لم يحدث الحدث بعد.
<1 ، الحدث موجود حاليًا في مرحلة الالتقاط ، أي في عملية الانتشار من عقدة الأجداد إلى العقدة المستهدفة. العملية من كائن النافذة إلى عقدة المستند ، ثم إلى عقدة htmlhtmlelement ، حتى العقدة الأصل للعقدة الهدف.
<2 ، يصل الحدث إلى العقدة المستهدفة ، أي أن العقدة التي أشار إليها السمة الهدف.
<3 ، الحدث في مرحلة الفقاعة ، أي في عملية الانتشار الخلفية من العقدة المستهدفة إلى عقدة الأجداد. هذه العملية من العقدة الأصل على طول الطريق إلى كائن النافذة. لا يمكن أن تحدث هذه المرحلة إلا إذا كانت سمة الفقاعات صحيحة
2. فيما يتعلق بالسلوك الافتراضي للأحداث:
إلغاء: إرجاع قيمة منطقية تشير إلى ما إذا كان يمكن إلغاء الحدث. إذا كنت ترغب في إلغاء حدث ما ، فأنت بحاجة إلى الاتصال بطريقة PreventDefault في هذا الحدث
DefaultPrevented: إرجاع قيمة منطقية تشير إلى ما إذا كان قد تم استدعاء طريقة PreventDefault.
3. فيما يتعلق بالعقدة المستهدفة للحدث:
CurrentTarget: إرجاع العقدة المرتبطة بوظيفة الاستماع لتنفيذ الحدث.
الهدف: إرجاع العقدة التي أثارت الحدث. في IE6-II8 ، اسم هذه الخاصية ليس هدفًا ، بل هو srcelement
4. فيما يتعلق بمعلومات أخرى حول كائن الحدث:
النوع: إرجاع سلسلة تمثل نوع الحدث
التفاصيل: إرجاع قيمة رقمية تمثل بعض المعلومات حول الحدث. يرتبط المعنى المحدد بنوع الحدث. بالنسبة لأحداث الماوس ، فهذا يعني عدد مرات الضغط على زر الماوس في موضع معين. على سبيل المثال ، بالنسبة لأحداث DBLCLICK ، تكون قيمة سمة التفاصيل دائمًا 2.
الطابع الزمني: إرجاع الطابع الزمني مللي ثانية ، يشير إلى الوقت الذي حدث فيه الحدث. يبدأ الحساب من performancetiming.navigationStart ، مما يعني الوقت الذي يستغرقه المستخدم للانتقال إلى صفحة الويب. إذا كنت ترغب في تحويل هذه القيمة إلى Timestamp Unix Epoch ، فأنت بحاجة إلى حساب Event.Timestamp + Performance.timing.NavigationStart
isTrusted: إرجاع قيمة منطقية تشير إلى ما إذا كان الحدث جديرًا بالثقة. ليس مفيدًا جدًا ، دعم المتصفحات المختلفة مختلفة.
طرق كائن الحدث:
PRESEDEFAULT (): يلغي السلوك الافتراضي للمتصفح للحدث الحالي. إن فرضية هذه الطريقة لتتحول إلى أن الخاصية القابلة للإلغاء لهذا الحدث صحيحة. إذا كان خطأ ، فإن استدعاء هذه الطريقة ليس له أي تأثير.
التوقف عن العمل (): إنهاء الحدث للانتشار أكثر أثناء التقاط أو معالجة الهدف أو مرحلة الفقاعة من عملية الانتشار. بعد استدعاء هذه الطريقة ، سيتم استدعاء المعالج على العقدة التي تتعامل مع الحدث ولن يتم إرسال الحدث إلى العقد الأخرى. ملاحظة: لا يمكن أن تمنع هذه الطريقة مقابض الأحداث الأخرى على نفس عقدة المستند من الاتصال بها ، ولكن يمكن أن تمنع إرسال الأحداث إلى عقد أخرى.
stopimmediatepropagation (): يمنع وظائف الاستماع الأخرى من استدعاء نفس الحدث. طالما أن إحدى وظائف الاستماع تستدعي الطريقة ، فلن يتم تنفيذ وظائف الاستماع الأخرى مرة أخرى.
الرابط المرجعي:
http://javaScript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
دليل جافا سكريبت موثوق الطبعة السادسة
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.