SimplES js

Simples-js

Sistem acara JavaScript sederhana untuk interaksi dasar dengan elemen DOM

Bagaimana cara menggunakannya?

Seluruh sistem acara memiliki satu contoh utama kelas SimplES . Kami dapat melampirkan sebanyak mungkin acara pada contoh ini. Kami dapat menambahkannya di Instantiating:

 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" ) ;    
        }
    }
] ) ;

Dan juga kapan pun setelah instantiating dengan metode. Salah satunya adalah attachEvent yang hanya menambahkan satu yang disebut Event_Pair, yang merupakan objek dengan dua properti, element dan onEvent (properti ini harus dinamai seperti ini).

 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" ) ) ;

Cara lain untuk menambahkan acara adalah menambahkan fungsi yang sama ke beberapa elemen. Ini dapat dicapai dengan metode attachWithSameFunction .

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

const eventSystem = new SimplES ( ) ;

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

Kami dapat memicu suatu peristiwa ketika target klik tidak ada dalam acara yang terdaftar dengan addEmptyClick . Perlu diingat bahwa setiap panggilan metode ini dengan input yang valid akan mengesampingkan acara sebelumnya. Kapan ini berguna? Misalnya ketika halaman web memiliki beberapa tombol seperti posting di jejaring sosial. Mereka memiliki tombol opsi yang membuka kotak dialog kecil, tetapi kami juga ingin menutupnya ketika pengguna mengklik ke tombol lain atau ketika ia mengklik dan kemudian kami dapat menggunakan metode ini.

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

PS: Jangan ragu untuk memperluas perpustakaan kecil ini: D