如何创建自定义事件来处理所有转换结束事件

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

本文关键字：事件 处理 结束 转换 自定义 何创建 创建      更新时间：2023-09-26

我想创建一个自定义事件来处理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在以后为我使用自定义事件设置的某些任意 DOM 元素触发任何适用的 transitionend 事件时实际触发我的自定义transitionend事件。

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

一个简单的方法是创建一个全局变量（字符串），其中包含所有转换结束事件。然后将事件侦听器添加到该字符串。例：

//your global var:
window.endTransition = 'webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionend';
//your event
elem.addEventListener(window.endTransition, function(e){
    //your awesome piece of JS
});
相关文章：