모든 종점 이벤트를 처리하는 사용자 지정 이벤트를 만들려면 어떻게해야합니까?

Question

제가 transitionend가 이벤트 (즉, webkitTransitionEnd, mozTransitionEnd, msTransitionEnd, oTransitionEnd 및 W3C transitionend 이벤트)의 모든 다른 벤더 접두사 버전을 처리하는 사용자 이벤트를 생성 할.

이상적으로, 나는 다음과 같이 만들려는 사용자 정의 transitionend 이벤트를 사용할 수 있도록하고 싶습니다 :

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

불행하게도, 나는이 작업을 수행하는 방법에 단서가 없다. 나는 document.createEvent에보고했지만, 사실은 내가에서 내 사용자 지정 이벤트로 설정 어떤 임의의 DOM 요소 때 적용 가능한 transitionend 이벤트가 발생을 해고 내 사용자 지정 transitionend 이벤트를 얻을 initEvent 및 dispatchEvent와 document.createEvent를 사용하는 방법을 알아낼 수 없었다 나중에 시간.

코드에 대한 도움이 있으면 크게 감사하겠습니다.
또한 맞춤 이벤트를 만드는 것보다이 문제에 대한 더 나은 방법이 있다면 알려 주시기 바랍니다.
결국에는 모듈화 된 솔루션을 원합니다. JS에 커스텀 이벤트에 대해 배우고 싶습니다.

감사합니다.

Answer 1

쉬운 방법은 모든 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 
});