SimplES js

simples-js

DOM要素との基本的な相互作用のための簡単なJavaScriptイベントシステム

それを使用する方法は？

イベントシステム全体には、 SimplESクラスの1つのメインインスタンスがあります。このインスタンスに多くのイベントを添付することができます。 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" ) ;    
        }
    }
] ) ;

また、メソッドをインスタンス化した後はいつでも。そのうちの1つはattachEventです。これは、単に1つelementいわゆるEvent_Pair onEvent追加します。

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

イベントを追加する別の方法は、同じ関数を複数の要素に追加することです。これは、 attachWithSameFunctionメソッドで実現できます。

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

const eventSystem = new SimplES ( ) ;

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

ClickのターゲットがaddEmptyClickを使用して登録されたイベントにない場合、イベントをトリガーできます。有効な入力を使用したこの方法のすべての呼び出しは、以前のイベントをオーバーライドすることに注意してください。これはいつ役に立ちますか？たとえば、Webページにソーシャルネットワーク上の投稿などの複数のボタンがある場合。小さなダイアログボックスを開くオプションボタンがありますが、ユーザーが別のボタンにクリックしたり、クリックしてからこの方法を使用したときにも閉じたいと思います。

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

PS：この小さなライブラリを自由に拡張してください：d