SimplES js

simples-js

簡單的JavaScript事件系統，用於與DOM元素的基本交互

如何使用它？

整個事件系統具有SimplES類的一個主要實例。我們能夠根據需要將盡可能多的事件附加到此實例上。我們可以在實例化中添加它們：

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

而且，每當使用方法實例化後。其中一個是attachEvent ，它只是添加一個所謂的event_pair，它是一個具有兩個屬性， element和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!" ) ) ;

當單擊目標不在addEmptyClick的註冊事件中時，我們可以觸發事件。請記住，使用有效輸入的每種呼叫都會覆蓋上一個事件。什麼時候有用？例如，當網頁具有多個按鈕時，例如社交網絡上的帖子。他們的選項按鈕可以打開一個一些對話框，但是當用戶單擊另一個按鈕或他/她單擊時，我們也希望關閉它們，然後我們可以使用此方法。

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

PS：隨意擴展這個小庫：D