如何創建自定義事件來處理所有transitionend事件？

我希望創建一個處理所有transitionend事件（即webkitTransitionEnd，mozTransitionEnd，msTransitionEnd，oTransitionEnd和W3C transitionend事件）的不同的供應商前綴版本的自定義事件。如何創建自定義事件來處理所有transitionend事件？

理想情況下，我希望能夠使用自定義transitionend事件，我想創建如下：

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

不幸的是，我不知道如何做到這一點。我正在調查document.createEvent，但我無法弄清楚如何使用document.createEvent與initEvent和dispatchEvent實際上讓我的自定義transitionend事件觸發，因爲任何適用的transitionend事件觸發了一些隨我的自定義事件設置的任意DOM元素以後的時間。

任何與代碼的幫助將不勝感激。
此外，如果有更好的方法來解決這個問題比創建自定義事件，請讓我知道。最後，我真的只想要一個儘可能模塊化的解決方案（我希望能夠在JS中學習一些關於JS的自定義事件）。

謝謝。

來源

2013-10-29 HartleySan

http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers –

一個簡單的方法可以創建一個全局變量（字符串），其中包含所有transitionend事件。然後爲該字符串添加一個eventlistener。例如：

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

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

來源

2013-10-29 13:17:35 LuudJacobs

啊，爽。我不知道這可以做到。這實際上可能是最簡單/最好的解決方案，但在將其標記爲正確答案之前，我想知道如何去定製事件路由，只是爲了學習。 – HartleySan

這是一個很好的解決方案。謝謝。我實際上最終採用了Modernizr的做法，這在我的問題的評論鏈接中已經提到。我走了這條路，因爲我擔心在爲所有不同版本的transitionend設置事件處理程序時，可能觸發多個事件的一些邊緣情況。不過，再次感謝。 – HartleySan

Modernizr確實是更復雜應用的更好解決方案。我的解決方案几乎是最簡單的方法。 – LuudJacobs

如何創建自定義事件來處理所有transitionend事件？

回答

相關問題