SimplES js

Simples-js

Sistema de eventos simples javascript para interações básicas com elementos DOM

Como usá -lo?

Todo o sistema de eventos possui uma instância principal da classe SimplES . Somos capazes de anexar tantos eventos a esse caso quanto quisermos. Podemos adicioná -los no instanciante:

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

E também sempre que após instantar com métodos. Um deles é attachEvent , que simplesmente adiciona um chamado Event_pair, que é um objeto com duas propriedades, element e onEvent (essas propriedades devem ser nomeadas assim).

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

Outra maneira de adicionar eventos é adicionar a mesma função a vários elementos. Isso pode ser realizado com o 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 desencadear um evento quando o alvo de um clique não estiver nos eventos registrados com addEmptyClick . Lembre -se de que todas as chamadas deste método com entrada válida substituirão o evento anterior. Quando isso é útil? Por exemplo, quando a página da web possui vários botões, como postagens na rede social. Eles têm o botão Opções, que abre uma pequena caixa de diálogo, mas queremos fechá -las quando o usuário clicar em outro botão ou quando ele/ela clicará e depois podemos usar esse método.

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

PS: Sinta -se à vontade para expandir esta pequena biblioteca: D