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