شرح مفصل لكائنات الحدث وكائنات مصدر الحدث وتدفقات الأحداث في js

• ما هي الأحداث: تشير الأحداث إلى جميع الأحداث التي يمكن أن تحدث في js ويتم مراقبتها، مثل: (تغيرات الماوس ولوحة المفاتيح ونافذة المتصفح وما إلى ذلك)

• ما هو كائن الحدث (الحدث): في مصطلحات الشخص العادي، هو كائن يسجل معلومات مختلفة حول الحدث.
  ما يجب ملاحظته هنا هو أن كائن الحدث سيكون به مشكلات في التوافق في المتصفحات الأخرى غير IE، فهو حدث، ولكن في غير المتصفحات، فهو window.event.

 btn.onclick = function(event){let e = events ||.

بكل بساطة، يشير إلى الكائن المحدد الذي وقع عليه الحدث. بالنسبة لعناصر العنصر، يشير كائن مصدر الحدث إلى العنصر الذي نقرت عليه. هناك أيضًا مشكلات في توافق المتصفح:

• في فايرفوكس هو events.srcElement
• في IE هو الحدث.target
  تشير طريقة الكتابة المتوافقة إلى كائن الحدث

تيار الحدث

تنقسم تدفقات الأحداث بشكل أساسي إلى فئتين: 1. التقاط الأحداث 2. ترتيب الأحداث هو الالتقاط أولاً ثم الفقاعة، ولكن إذا تم تقسيمها إلى أقسام فرعية، فستكون هناك مرحلة مستهدفة بعد التقاط مرحلة الفقاعة هو عنصر DOM الذي سيتم تنفيذه على وجه التحديد

التقاط الأحداث

تتلقى العقدة العلوية الحدث أولاً، ثم تنشره للأسفل إلى العقدة المحددة. على سبيل المثال: عندما ينقر المستخدم على العنصر p ويستخدم التقاط الحدث، سيتم نشر حدث النقر بترتيب المستند>htm>body>p. طريقة النقل من الخارج إلى الداخل.

الأحداث الفقاعية

على عكس حدث الالتقاط، يتم تمريره من الداخل إلى الخارج. عندما ينقر المستخدم على p، سيتم تمريره إلى الأصل، p>body>html. ***لأن هذه الميزة تُستخدم غالبًا لتفويض الأحداث.

وفد الحدث

نحن نربط نفس الأحداث التي سيتم تشغيلها بواسطة جميع العناصر الفرعية بالعنصر الأصلي، مما قد يقلل من عمليات DOM ويحسن الأداء. طريقة الاستخدام المحددة هي استخدام طريقة كائن مصدر الحدث.

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

لربط أحداث النقر بـ li، عادةً ما يكون أسلوبنا هو التكرار خلال أحداث النقر بـ li

 دع oLi = document.querySelectorAll("li")
 ل(دعني;أنا <oLi.length;i++){
            oLi[i].onclick = function(){
                console.log("أنا")
            }
        }

طريقة استخدام تفويض الحدث هي

 Let oUl = document.querySelector("ul")
  oUl.onclick = الوظيفة(الحدث){
            دع e = حدث ||
            console.log(e.target.innerHTML)
        }

• ميزة
• تحسين الأداء، لا حاجة للتكرار عبر جميع العناصر لربط الأحداث واحدًا تلو الآخر.
• يمكن إنشاء عناصر جديدة ومرنة ديناميكيًا دون إعادة ربط الأحداث.

عملية منع ظهور الأحداث (كتابة التوافق)

***بعض الأحداث لا تتطلب عمليات الفقاعات

 وظيفة توقف الفقاعة (الحدث) {
    var e = events||window.event // طريقة الكتابة المتوافقة مع كائن الحدث e.stopProgation() ? e.stopProgation() : e.cancelBubble = true // طريقة الكتابة المتوافقة مع IE}

حظر الأحداث الافتراضية (طريقة الكتابة المتوافقة)

***حظر علامة وزر الفأرة الأيمن للقفز الافتراضي وأحداث القائمة

 وظيفة إلغاء التعامل (الحدث) {
    var e = حدث||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

التوصيات ذات الصلة: [فيديو تعليمي لجافا سكريبت]

ما ورد أعلاه هو شرح مفصل لكائن الحدث وكائن مصدر الحدث ودفق الحدث في JS. لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!