不同浏览器中的AddEventListener（）转换结束回调[重复]答案

【问题标题】：AddEventListener() transition end callback in different browsers [duplicate]不同浏览器中的AddEventListener（）转换结束回调[重复]
【发布时间】：2014-01-23 01:14:00
【问题描述】：

浏览器有不同的过渡结束回调。所以，我必须为每个人创建一个 addEventListener()。

addEventListener('transitionend', function() {
  // the same below
});

addEventListener('webkitTransitionEnd', function() {
  // the same above
});

但我不喜欢这样的代码。 为什么我这样写就不行了？？：

addEventListener('transitionend webkitTransitionEnd', function() { });
  // thing
});

以上不适用于任何浏览器。第一个有效。

有没有更好的方法？有什么建议吗？

【问题讨论】：

如果您查看addEventListener 函数，您会发现您的代码不起作用，因为该函数不是这样定义的。您的论点 'transitionend webkitTransitionEnd' 只是一个字符串。如果有一个重载函数需要像target.addEventListener(["typ1", "type2"], listener); 这样的数组，你可以传递一个字符串数组。但是没有。
我只是简化并删除了元素。你说的是这个吗？
我不知道你说的I just simplified and removed the element是什么意思。为了更好地理解您的问题，我需要更多信息。为什么要使用多个 eventListener 处理不同的转换？你想达到什么目标？
我想要一个跨浏览器过渡结束回调。就像我说的“浏览器有不同的过渡结束回调。所以，我必须为每个创建一个 addEventListener()。”。但是我的代码那样丑。
我只是想知道它是否可以更好。

标签： javascript jquery animation

【解决方案1】：

addEventListener 只接受一个事件，所以你必须单独编写它们。您可以遍历列表以使其至少看起来更小

["transitionend", "webkitTransitionEnd", "mozTransitionEnd"].forEach(function(transition) {
     document.addEventListener(transition, handler, false);
});

function handler() {
    // thing
}

【讨论】：