SimplES js

Simples-Js

Einfaches JavaScript -Ereignissystem für grundlegende Interaktionen mit DOM -Elementen

Wie benutze ich es?

Das gesamte Ereignissystem verfügt über eine Hauptinstanz der SimplES -Klasse. Wir sind in der Lage, dieser Instanz so viele Ereignisse anzuhängen, wie wir es wollen. Wir können sie beim Instanziieren hinzufügen:

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

Und auch wenn nach dem Instanziieren mit Methoden. Einer von ihnen ist attachEvent , der einfach einen sogenannten Event_Pair hinzufügt, bei dem es sich um ein Objekt mit zwei Eigenschaften, element und onEvent handelt (diese Eigenschaften müssen so benannt werden).

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

Eine andere Möglichkeit, Ereignisse hinzuzufügen, besteht darin, mehreren Elementen dieselbe Funktion hinzuzufügen. Dies kann mit der attachWithSameFunction -Methode erreicht werden.

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

const eventSystem = new SimplES ( ) ;

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

Wir können ein Ereignis auslösen, wenn sich das Ziel eines Klicks nicht in den registrierten Ereignissen mit addEmptyClick befindet. Denken Sie daran, dass jeder Anruf dieser Methode mit gültigen Eingaben das vorherige Ereignis überschreibt. Wann ist das nützlich? Zum Beispiel, wenn die Webseite mehrere Schaltflächen wie Beiträge im sozialen Netzwerk enthält. Sie haben Optionenschaltflächen, die ein kleines Dialogfeld öffnet, aber wir möchten sie auch schließen, wenn der Benutzer auf eine andere Schaltfläche klickt oder wenn er/sie wegklickt, und dann können wir diese Methode verwenden.

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

PS: Fühlen Sie sich frei, diese winzige Bibliothek zu erweitern: D.