SimplES js

Simples-JS

نظام أحداث JavaScript بسيط للتفاعلات الأساسية مع عناصر DOM

كيف تستخدمه؟

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

 const blueSquare = document . querySelector ( '.blue-square' ) ;
const redSquare  = document . querySelector ( '.red-square' ) ; 

const eventSystem = new SimplES ( [
    {
        element : blueSquare ,
        onEvent : function ( ) {
            console . log ( "Clicked on blue square" ) ;    
        }
    } ,
    {
        element : redSquare ,
        onEvent : function ( ) {
            console . log ( "Clicked on red square" ) ;    
        }
    }
] ) ;

وأيضا كلما بعد إنشاء خلاف مع الأساليب. أحدهم هو attachEvent يضم ببساطة واحدة تسمى event_pair ، وهو كائن له خصائصين ، element و onEvent (يجب تسمية هذه الخصائص على هذا النحو).

 const blueSquare = document . querySelector ( '.blue-square' ) ;
const redSquare  = document . querySelector ( '.red-square' ) ; 

const eventSystem = new SimplES ( ) ;

eventSystem . attachEvent ( blueSquare , ( ) => console . log ( "Clicked on blue square" ) ) ;
eventSystem . attachEvent ( redSquare , ( ) => console . log ( "Clicked on red square" ) ) ;

هناك طريقة أخرى لإضافة الأحداث وهي إضافة نفس الوظيفة إلى عناصر متعددة. يمكن تحقيق ذلك باستخدام طريقة attachWithSameFunction .

 const buttons = document . getElementsByClassName ( 'buttons' ) ;

const eventSystem = new SimplES ( ) ;

eventSystem . attachWithSameFunction ( buttons , ( ) => console . log ( "Clicked on one of these blue buttons!" ) ) ;

يمكننا تشغيل حدث عندما يكون هدف النقر في الأحداث المسجلة مع addEmptyClick . ضع في اعتبارك أن كل نداء لهذه الطريقة مع إدخال صالح سيتجاوز الحدث السابق. متى هذا مفيد؟ على سبيل المثال عندما تحتوي صفحة الويب على أزرار متعددة مثل المنشورات على الشبكة الاجتماعية. لديهم زر خيارات يفتح مربع حوار صغير ، لكننا نريد أيضًا إغلاقها عندما ينقر المستخدم على زر آخر أو عند النقر فوقه وبعد ذلك يمكننا استخدام هذه الطريقة.

 eventSystem . addEmptyClick ( ( ) => console . log ( "Here is nothing to click on!" ) ) ;

ملاحظة: لا تتردد في توسيع هذه المكتبة الصغيرة: د