لماذا تحتاج addeventListener؟
دعونا نلقي نظرة على مقطع:
رمز HTML
<div id = "box"> مطاردة الأحلام </div>
رمز مع ON
window.onload = function () {var box = document.getElementById ("box") ؛ box.onclick = function () {console.log ("i am box1") ؛ } box.onclick = function () {box.style.fontsize = "18px" ؛ console.log ("أنا box2") ؛ }} النتيجة: "أنا box2"لقد رأيته ، والثاني يكتب أوضح أول نظام Onclick. على الرغم من أنه في معظم الحالات ، يمكننا استخدامه لإكمال النتائج التي نريدها ، في بعض الأحيان نحتاج إلى تنفيذ أحداث متطابقة متعددة. من الواضح أنه إذا لم نتمكن من استخدامه لإكمال ما نريد ، فلا داعي للتخمين. يجب أن تعرف ، صحيح! يمكن لـ AddEventListener ربط نفس الحدث عدة مرات ولن يكتب الحدث السابق.
رمز مع AddEventListener
window.onload = function () {var box = document.getElementById ("box") ؛ box.adDeventListener ("Click" ، function () {console.log ("i am box1") ؛}) box.addeventListener ("click" ، function () {console.log (يتم ملء المعلمة الأولى من طريقة AddEventListenert في اسم الحدث. لاحظ أنك لا تحتاج إلى الكتابة عليها. يمكن أن تكون المعلمة الثانية وظيفة. تشير المعلمة الثالثة إلى عملية معالج الحدث في مرحلة الفقاعة أو مرحلة الالتقاط. إذا كان True يمثل معالجة مرحلة الالتقاط ، إذا كان False يمثل معالجة مرحلة الفقاعة ، فيمكن حذف المعلمة الثالثة. في معظم الحالات ، لا يلزم استخدام المعلمة الثالثة. إذا لم تتم كتابة المعلمة الثالثة ، فإن الخاطئة الافتراضية خاطئة.
استخدام المعلمة الثالثة
في بعض الأحيان هذا هو الحال
<body>
<div id = "box">
<div id = "child"> </viv>
</div>
</body>
إذا قمت بإضافة حدث نقرة إلى المربع ، فلا توجد مشكلة إذا قمت بالنقر فوق المربع مباشرة ، ولكن إذا قمت بالنقر فوق عنصر الطفل ، فكيف يفعل ذلك؟ (أمر التنفيذ)
box.addeventListener ("Click" ، function () {console.log ("box") ؛})وهذا يعني أن الحدث الافتراضي يتم تنفيذه بالترتيب الذي تُحدث فيه فقاعات الأحداث.
إذا تم كتابة المعلمة الثالثة على أنها صحيحة ، فسيتم تنفيذها بترتيب تنفيذ التقاط الأحداث.
box.addeventListener ("Click" ، function () {console.log ("box") ؛} ، true) child.addeventListener ("click" ، function () {console.log (عملية تنفيذ فقاعة الأحداث:
ابدأ بالفقاعة إلى الأعلى من العنصر الأكثر تحديداً (العنصر الذي نقرت عليه). خذ قضيتنا أعلاه وترتيبها هو: الطفل-> مربع
عملية تنفيذ التقاط الأحداث:
ابدأ بالفقاعة في الداخل من العنصر الأقل تحديدًا (المربع الموجود في الجزء الخارجي). خذ قضيتنا أعلاه والترتيب هو: Box-> الطفل
تتفهم المقالة أعلاه بشكل شامل الفرق بين AddEventListener و ON هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.