SimplES js

Simples-JS

Sistema simple de eventos JavaScript para interacciones básicas con elementos DOM

¿Cómo usarlo?

Todo el sistema de eventos tiene una instancia principal de la clase SimplES . Podemos adjuntar tantos eventos a este caso como queramos. Podemos agregarlos en la instancia:

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

Y también cuando después de instancias con los métodos. Uno de ellos es attachEvent , que simplemente agrega uno llamado Event_Pair, que es un objeto con dos propiedades, element y onEvent (estas propiedades deben nombrarse así).

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

Otra forma de agregar eventos es agregar la misma función a múltiples elementos. Esto se puede lograr con el método attachWithSameFunction .

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

const eventSystem = new SimplES ( ) ;

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

Podemos activar un evento cuando el objetivo de un clic no está en los eventos registrados con addEmptyClick . Tenga en cuenta que cada llamada de este método con entrada válida anulará el evento anterior. ¿Cuándo es esto útil? Por ejemplo, cuando la página web tiene múltiples botones como publicaciones en la red social. Tienen un botón de opciones que abre un pequeño cuadro de diálogo, pero también queremos cerrarlas cuando el usuario hace clic en otro botón o cuando se hace clic y luego podemos usar este método.

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

PD: No dude en expandir esta pequeña biblioteca: D