When I've learn javascript, a few years ago, like a lot of people, I've start JS with a famous framework: jQuery. Event, ajax, dom manipulation, a whole new world to me !

It was simple and easy to use with a good learning curve, but now I've clearly see limitation with it, like a lot of framework, it is extremely slow, and with new navigator, a lot of jQuery feature is directly include in browser, so why not use vanillaJS and fasten up my application and website.

But there are one browser api that haven't much evolved during year: javascript Event. Handle dynamically added elements(delegate) or use custom event is still pain in the ass ! This is why I've developed an utilities to use these functionality like it's magic.

So here come my MagicEvent that extends event functionality to keep it simple with an jQuery like syntax with easy delagate and customs events management.

MagicEvent.on("click", ".clickme", myClickFunc);
MagicEvent.on("slideswitch", ".diapo", slideSwitchHandler);

Here, I just set two listener, one on click for all .clickme elements, and another on each .diapo when I emit an slideswitch custom Event they're no difference between settings the two for ya !

MagicEvent.emit("click", link);
MagicEvent.on("slideswitch", diapoDiv);
MagicEvent.on("slideswitch", diapoDiv, {next: 3});

This time I choose to emit events, it's simple, I just need to choose an event and an element, nor more work, event on custom event, and i can embark custom data if I need, it's easy!

So if you want to try it, here the repo ! And enjoy.

<script type="text/javascript" src="pathtoassets/MagicEvent.js"></script>
<script type="text/javascript">
  //here start the fun
<script>

  //place an event listener for click on a tag
  MagicEvent.on("click", "a", myLinkClickFunc);

  //place an event listener for click, hover and touch on a tag
  MagicEvent.on("click hover touch", "a", myLinkClickFunc);

Even if it's working pretty good, I still working on it so any feedback is appreciated !