SimplES-js

Simple javascript event system for basic interactions with DOM elements

How to use it?

The whole event system has one main instance of SimplES class. We are able to attach as many events to this instance as we want. We can add them at the 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");    
        }
    }
]);

And also whenever after instantiating with methods. One of them is attachEvent which simply adds one so called event_pair, which is an object with two properties, element and onEvent (these properties must be named like this).

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

Another way to add events is adding the same function to multiple elements. This can be accomplished with the attachWithSameFunction method.

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

const eventSystem = new SimplES();

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

We can trigger an event when the target of a click is not in the registred events with addEmptyClick. Keep in mind that every call of this method with valid input will override the previous event. When is this useful? For example when the web page has multiple buttons like posts on social network. They have options button which opens a little dialog box, but we want to also close them when the user clicks to another button or when he/she clicks away and then we can use this method.

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

P.S.: Feel free to expand this tiny library :D