SimplES js

Simples-js

Système d'événements JavaScript simple pour les interactions de base avec les éléments DOM

Comment l'utiliser?

L'ensemble du système d'événements a une instance principale de la classe SimplES . Nous pouvons attacher autant d'événements à cette instance que nous le souhaitons. Nous pouvons les ajouter à l'instanciation:

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

Et aussi chaque fois après instanciation avec les méthodes. L'un d'eux est attachEvent qui ajoute simplement un soi-disant Event_pair, qui est un objet avec deux propriétés, element et onEvent (ces propriétés doivent être nommées comme celle-ci).

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

Une autre façon d'ajouter des événements consiste à ajouter la même fonction à plusieurs éléments. Cela peut être accompli avec la méthode attachWithSameFunction .

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

const eventSystem = new SimplES ( ) ;

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

Nous pouvons déclencher un événement lorsque la cible d'un clic n'est pas dans les événements enregistrés avec addEmptyClick . Gardez à l'esprit que chaque appel de cette méthode avec une entrée valide remplacera l'événement précédent. Quand est-ce utile? Par exemple, lorsque la page Web dispose de plusieurs boutons comme des publications sur le réseau social. Ils ont un bouton d'options qui ouvre une petite boîte de dialogue, mais nous voulons également les fermer lorsque l'utilisateur clique sur un autre bouton ou lorsqu'il clique sur, puis nous pouvons utiliser cette méthode.

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

PS: n'hésitez pas à étendre cette petite bibliothèque: D