MagicEvent is one easy and fast event handler in vanillaJS, it natively handle dynamically created Element ! Be the magician !
It is easy, just call MagicEvent.js in your page then start the fun
<script type="text/javascript" src="pathtoassets/MagicEvent.js"></script>
<script type="text/javascript">
//here start the fun
<script>
To register an event listener just use on method
//place an event listener for click on a tag
MagicEvent.on("click", "a", myLinkClickFunc);
It handle mutiple event binding in one go
//place an event listener for click, hover and touch on a tag
MagicEvent.on("click hover touch", "a", myLinkClickFunc);
You can select your elements directly by CSS Selector
//place an event listener for click on all element with class .clickme, event if they were created dynamically
MagicEvent.on("click", ".clickme", myClickFunc);
All method return MagicEvent object to chain all your call
//you can chain all your call
MagicEvent.on("click", "a", myLinkClickFunc)
.on("click", ".clickme", myClickFunc);
Delegate is automatic for all elements, so it's easy to make it !(not available for scroll event)
//register event listener with delegate
MagicEvent.on("click", "a", myLinkClickFunc)
Due to delegate, event.currentTarget is always document, but you can use event.delegateTarget (except for scroll)
function(event){
//get <a> element that was click
const el = event.delegateTarget;
//magic here
}
MagicEvent.on("click", "a", myLinkClickFunc)
If you want a listener to be executed only once, use one method
//place an event listener that will execute only once per HTML element
MagicEvent.one("click", "a", myOnceLinkClickFunc);
You can remove an event listener with off method
//remove existing listener
MagicEvent.on("click", "a", myLinkClickFunc)
.off("click", "a", myLinkClickFunc);
Do you want to emit an event on precise element just use emit method
// emit an event with bubbling on (event must be in listen by MagicEvent)
// emit click on all 'a' tag
MagicEvent.emit("click", a);
// emit event with custom data
MagicEvent.emit("click", a, {simulatedClick: true})
Event Handler handle custom event like it's nothing, just use it on normal way
// place event listenner on custom event
MagicEvent.on("supercustom", "a", funcForSuperCustom);