How can I create a custom event to handle all transitionend events?

Question

I want to create a custom event that handles all the different vendor-prefixed versions of the transitionend event (i.e., webkitTransitionEnd, mozTransitionEnd, msTransitionEnd, oTransitionEnd and the W3C transitionend event).

Ideally, I'd like to be able to use the custom transitionend event I want to create as follows:

elem.addEventListener('myTransitionEnd', function (evt) {
  // Called whenever any transitionend event fires.
});

Unfortunately, I have no clue how to do this. I was looking into document.createEvent, but I couldn't figure out how to use document.createEvent with initEvent and dispatchEvent to actually get my custom transitionend event to fire when any applicable transitionend event fires for some arbitrary DOM elements that I set up with my custom event at a later time.

Any help with the code would be greatly appreciate.
In addition, if there is a better approach to this problem than creating a custom event, please let me know.
In the end, I really just want to have a solution that is as modular as possible (and I was hoping to learn a thing or two about custom events in JS while I'm at it).

Answer 1

An easy way to do this would be creating a global variable (string) with all transitionend events in it. And then add a eventlistener to that string. Example:

//your global var:
window.endTransition = 'webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionend';

//your event
elem.addEventListener(window.endTransition, function(e){
    //your awesome piece of JS
});