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