عند الحديث عن أحداث JavaScript ، من الصعب تجنب ثلاثة مواضيع: فقاعات الأحداث ، والتقاط الأحداث ، وحظر الأحداث الافتراضية ، سواء كانت مقابلة أو في العمل اليومي.
1. فقاعات الأحداث
دعونا نلقي نظرة على قطعة من الكود:
var $ input = document.getElementsByTagName ("input") [0] نافذة. ALERT ("RED")} $ div.onclick = function (e) {this.style.border = "5px solid green" Alert ("Green")رمز HTML
<viv> <input type = "button" value = "اختبار الفقاعات الحدث" /> < /div> "الأحمر" ، "الأخضر" ، "الأصفر" الملوثات العضوية الثابتة بدوره.
نيتك الأصلية هي تشغيل عنصر الزر ، ولكن يتم تشغيله مع الحدث المرتبط بالعنصر الأصل. هذه هي فقاعة الحدث.
إذا تم تغيير الحدث الملزم للإدخال إلى:
$ input.onclick = function (e) {this.style.border = "5px Solid Red" var e = e || نافذة. تنبيه ("أحمر") E.StopPropagation () ؛}في هذا الوقت ، سوف يطفو "Red" فقط لأنه يمنع الحدث من الفقاعات.
2. التقاط الحدث
نظرًا لوجود مجموعة من الأحداث ، يمكن أن يكون هناك التقاط الأحداث ، وهي عملية عكسية. الفرق هو من العنصر العلوي إلى العنصر الهدف أو من العنصر الهدف إلى العنصر العلوي.
لنرى قطعة رمز:
$ input.addeventListener ("Click" ، function () {this.style.border = "5px solid Red" ؛ Alert ("Red")} ، true) $ div.addeventListener ("click" ، function () {this.style.border = "5px solid green" ؛ this.style.border = "5px Solid Yellow" ؛في هذا الوقت ، "الأصفر" ، "الأخضر" ، "الأحمر" يبرز واحدًا تلو الآخر ، وهو التقاط الحدث.
3. منع الحدث الافتراضي
هناك بعض السلوكيات الافتراضية لعناصر HTML ، مثل علامة A ، وسيكون هناك إجراء قفزة بعد النقر ؛ يحتوي إدخال نوع إرسال في النموذج على حدث تقديم افتراضي ؛ إدخال نوع إعادة تعيين له سلوك إعادة تعيين نموذج. إذا كنت ترغب في حظر هذا السلوك الافتراضي للمتصفح ، فإن JavaScript يوفر لك طريقة.
var $ a = document.getElementsByTagName ("a") [0] ؛ $ a.onclick = function (e) {Alert ("تم حظر إجراء القفزة من قبلي") e.preventDefault () ؛ // return false ؛ // من الممكن أيضًا} <a href = "http://keleyi.com"> ke leyi </a> قد انتهى الحدث الافتراضي.نظرًا لأن Return False و E.PreventDefault () لها نفس التأثير ، هل هناك أي اختلافات؟ بالطبع هناك.
يمكن تنظيم السلوك الافتراضي لمضيفي الأحداث فقط في سمات الأحداث HTML وطرق معالجة الأحداث على مستوى DOM0.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.