Javascript 找出可用的事件类型

在meteor中，当css3转换结束时，应触发以下事件处理程序：

Template.flipper.events({
    "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd": function (event) {
        console.log(this, event);
    }
});

但是，它似乎不接受多种事件类型

但是，以下内容在Google Chrome上运行良好：

Template.flipper.events({
    "webkitTransitionEnd": function (event) {
        console.log(event);
    }
});

我可以按如下方式分别分配活动：

function transitionEnd(event) {
    console.log(event);
}

Template.flipper.events({
    transitionend: transitionEnd,
    webkitTransitionEnd: transitionEnd,
    oTransitionEnd: transitionEnd,
    MSTransitionEnd: transitionEnd
});

但是现在，在一些支持

transitionend

且没有供应商前缀的浏览器版本上，事件将触发两次

我想了解支持哪种偶数类型，以便我可以执行以下操作：

var flipperEvents = {};

flipperEvents[supportedEvents("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd")] = function (event) {
    console.log(event);
});

Template.flipper.events(flipperEvents);

现在，我如何实现函数

supportedEvents

，该函数将返回

“transitionend”

，用于更现代的浏览器和供应商前缀版本

我宁愿不使用浏览器类型检测来评估要使用的前缀

有没有什么地方可以让我查找支持哪种偶数类型

我知道在jQuery中可以很容易地完成这项工作，但我试图避免使用jQuery

使现代化 我已尝试使用：

---

但这也不行。我认为这是因为Meteor不允许在呈现模板后使用事件映射。

我无法创建像

supportedEvents

那样通用的函数，但以下实现了目标：

var transitions = {
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd',
        'transition': 'transitionEnd',
        'MSTransition': 'msTransitionEnd',
        'OTransition': 'oTransitionEnd'
    },
    probe = document.createElement("div"),
    eventType;

for (type in transitions) {
    if (type in probe.style) {
        eventType = transitions[type];
        break;
    }
}

if (eventType) {
    var eventMap = {};

    eventMap[eventType] = function (event) {
        console.log(event);
    };

    Template.flipper.events(eventMap);
}

---

到目前为止，它在Chrome和Mozilla中工作。尚未测试其他浏览器。

为什么要避免使用jQuery？反正它就在Meteor下。@HubertOG因为我想把东西约束到模板的地标上。在使用jQUery时，我可以从Spark获得上下文，但我无法查询特定的地标。

var transitions = {
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd',
        'transition': 'transitionEnd',
        'MSTransition': 'msTransitionEnd',
        'OTransition': 'oTransitionEnd'
    },
    probe = document.createElement("div"),
    eventType;

for (type in transitions) {
    if (type in probe.style) {
        eventType = transitions[type];
        break;
    }
}

if (eventType) {
    var eventMap = {};

    eventMap[eventType] = function (event) {
        console.log(event);
    };

    Template.flipper.events(eventMap);
}