我如何创建一个自定义事件来处理所有过渡事件？

Question

我想创建一个自定义事件来处理transitionend事件的所有不同的供应商前缀版本（即webkitTransitionEnd，mozTransitionEnd，msTransitionEnd，oTransitionEnd和W3C transitionend事件） 。

理想情况下，我希望能够使用要创建的自定义transitionend事件，如下所示：

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

很遗憾，我不知道如何执行此操作。我一直在研究document.createEvent，但无法弄清楚如何将document.createEvent与initEvent和dispatchEvent结合使用，从而在某些情况下触发适用的transitionend事件时实际触发我的自定义transitionend事件我以后在自定义事件中设置的任意DOM元素。

对代码的任何帮助将不胜感激。此外，如果有比创建自定义事件更好的方法来解决此问题，请告诉我。最后，我真的只想拥有一个尽可能模块化的解决方案（我希望在学习JS的过程中能学到一两个关于定制事件的知识）。

Answer 1

一种简单的方法是创建一个包含所有transitionend事件的全局变量（字符串）。然后将一个事件侦听器添加到该字符串。示例：

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

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