Question

我正在尝试创建一个自定义＆＃34;事件＆＃34;并且我把它放在引号内，因为它不会像事件构造函数那样成为常规事件。

所以我想做的就是这个

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
                    }
                 });

我的问题是如何解雇＆＃34;事件＆＃34;？我的代码中readyState发生了变化，我的问题是解决了这个问题＆＃34;事件＆＃34;。

截至目前，使用事件控制器时，我只会触发一个readyState更改，这是完整的。但我有其他人

initialising
invoked
animating
complete

没有其他人开枪。

我的活动构造器示例：

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

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

这个问题是我必须做document.addEventListener或element.addEventListener虽然将事件监听器放在动画元素上似乎是合乎逻辑的但我不确定如何让它只是从元素中解雇而不是在文档上说...也许是自定义事件的一个小速成课程或者可能是＆＃34; hack＆＃34;事件发射系统，甚至我可以逻辑地看到的例子。

如果您对此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如果至少有一个处理此事件的事件处理程序名为 Event.preventDefault，则明确提到返回值为 false 。）即可。否则返回 true 。那对我不起作用。希望有所帮助！

创建自定义＆＃34;事件＆＃34;对于构造函数

1 个答案: