@teyostudios/sync-event-listener v0.1.0

SyncEventListener

SyncEventListener, is a small tool, which helps to assign js events to DOM objects dynamically loaded with Ajax.

When you create a new html object with js, it has no events. For example, if you have a list, and this list has create, edit, delete buttons, and you create a new row with js, the buttons in this row will not have the events unless you add them by hand.

With Sync Event Listener these events that need to be added on new elements, are added to the elements with a new function (instead of with addEventListener), and these events are added dynamically, just by calling a function after creating the new ones. html elements.

Starting 🚀

To use it you only need to import the module where you need it, and assign the events with the module, instead of using addEventListener.

See Deployment to know how to deploy the project.

Pre-requirements 📋

There are not pre requirements

Installation 🔧

Just install the last version

npm install @teyostudios/sync-event-listener --save

Deployment 📦

Import in your js

import SyncEventListener from @teyostudios/sync-event-listener;

If you prefer a shorter name

import SyncEventListener as customName from @teyostudios/sync-event-listener;

There are just 2 functions:

• sync : to add all events synced with addDynamicEvent()
• addDynamycEvent : to synchronize events to be added after sync()

Add Events

addDynamycEvent (type, query, callback)

type String - Js type of event (click, input, focusin,...) query String - DOM document.querySelector query. Ej: (".classname" , "#identifier", ".classname .otherclassname") callback function - The function that will be executed when the event is triggered

Ej:

SyncEventListener.addDynamycEvent("click", ".saveButton", sendData);

sync

When with js create a new object, add the synchronized events with Sync()

SyncEventListener.sync();

Build With 🛠️

PureJs

Versioned 📌

We use SemVer for versioning. For all available versions, loot at the tags in this repository

authors ✒️

• Diego Martín - Development - ElionTDA

Licence 📄

This project is under the MIT licence - see the file LICENSE.md for more details.

If you liked it and it was useful 🎁

• Tell others about this project 📢
• Invite to a coffee ☕ or a beer 🍺.
• Give thanks 🤓.

⌨️ con ❤️ por TeyoStudios 😊