Создание пользовательского «события» для конструктора

Question

Я пытаюсь создать пользовательское «событие», и я помещаю его в кавычки, потому что он не будет похож на обычное событие из конструкторов событий.

Так что я хотел бы сделать это

animate.addEventListener('animationReadyState',function(e){ 
    if(e.readyState == "complete") 
    { 
     console.log("Done"); 
    } 
}); 

var animation = animate(document.getElementById('element'),{ 
        left:"+200px", 
        top:"+200px", 
        easing: { 
         effect: "easeInOutBounce", 
         elasticity:1.5 
        } 
       }); 

Моя проблема заключается в том, чтобы выстрелить в «событие»? У меня есть readyState, меняющийся по всему моему коду, моя проблема сбрасывает это «событие».

Как раз сейчас, используя конструкторы событий, я получаю только одно изменение ReadyState, которое выдается полностью. Но у меня есть другие

initialising 
invoked 
animating 
complete 

Никто не стреляет.

Пример моих События Конструкторов:

var animateStateChange = new CustomEvent('animateStateChange',{ 'state' : null }); 

function initAnimate(){ 
    animateStateChange.state = "initialising"; 
    document.dispatchEvent(animateStateChange); 
} 

Проблема с этим я должен был бы сделать document.addEventListener или element.addEventListener хотя положить слушатель событий на элементе, который является животворящим кажется логичным, я не уверен, как сделать его только огнем из элемента и не говорить по документу ... Может быть, небольшой круговой курс по пользовательским событиям или, может быть, система взлома событий «взломать», даже примеры, которые я могу увидеть логически.

Это может дать лучший пример того, что я ищу, если вас к этому fiddle

Answer 1

Я не уверен, если мое решение будет ответить на ваш запрос, но я пытался использовать пользовательские события с учетом ситуации, приведенной выше. Кроме того, я вижу, что есть некоторый сбой в возвращаемом значении dispatchEvent, если предоставлен какой-либо обработчик. Отдельно я пытаюсь вернуть false из обработчика, но это тоже не работает. Ниже может помочь вам понять JavaScript пользовательского события немного:

Проверить эту ссылку для рабочего кода:

http://jsfiddle.net/3q0vubyp/1/

var animation = animate(document.getElementById('element'),{ 
       left:"+200px", 
       top:"+200px", 
       easing: { 
        effect: "easeInOutBounce", 
        elasticity:1.5 
       } 
      }); 
function handler(e){ 
    if(e.detail.state === "complete"){ 
      alert('Complete State'); 
      return false; 
      //e.preventDefault(); 
      //e.stopPropagation(); 
     } 
} 
function animate(element, anim){ 
    var i=0; 
    var j=true; 
    var state=['initialize','invoked','animating','complete']; 
    element.addEventListener('animateStateChange',handler); 
    while(j){ 
     var animateStateChange = new CustomEvent('animateStateChange',{ 'detail' : {"state": state[i++]} }); 
     //if(!element.dispatchEvent(animateStateChange)){ 
     // j=false; 
     //} 
     element.dispatchEvent(animateStateChange); 
     if(i==4) 
      j=false; 

    }; 
} 

В документации по dispatchEvent, doclink Это ясно сказано, что возвращаемое значение false, если хотя бы один из обработчиков событий, которые обрабатывали это событие, вызвал Event.preventDefault(). В противном случае он возвращает true. Это не работало для меня. Надеюсь, что это поможет!