如何创建自定义事件来处理所有 transitionend 事件？答案

【问题标题】：How can I create a custom event to handle all transitionend events?如何创建自定义事件来处理所有 transitionend 事件？
【发布时间】：2013-10-29 13:08:07
【问题描述】：

我想创建一个自定义事件来处理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 中的自定义事件）。

【问题讨论】：

stackoverflow.com/questions/5023514/…

标签： javascript dom-events transition event-listener custom-events

【解决方案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
});

【讨论】：

啊，酷。我不知道可以这样做。这实际上可能是最简单/最好的解决方案，但在我将其标记为正确答案之前，我也想知道如何走自定义事件路线，只是为了学习。
这是一个很好的解决方案。谢谢你。不过，我实际上最终采用了 Modernizr 的做事方式，这在我的问题评论中的链接中有所说明。我走那条路是因为我担心一些边缘情况，当您为所有不同版本的 transitionend 设置事件处理程序时，可能会触发多个事件。不过，再次感谢。
Modernizr 对于更复杂的应用程序确实是一个更好的解决方案。我的解决方案几乎是最简单的方法。