为构造函数创建自定义 "event"

Question

我正在尝试创建自定义 "event" 并将其放在引号内，因为它本身不像事件构造函数中的常规事件。

所以我想做的是这个

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

我的问题是如何关闭 "event"？我的代码中的 readyState 发生了变化，我的问题是触发了这个 "event"。

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

initialising
invoked
animating
complete

没有其他人开火。

我的事件构造函数示例：

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

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

这个问题是我必须做 document.addEventListener 或 element.addEventListener 尽管将事件侦听器放在动画元素上似乎合乎逻辑我不确定如何制作它只从元素中触发，而不是在文档中说明...也许是关于自定义事件的一些速成课程，或者可能是 "hack" 事件触发系统，甚至是我可以在逻辑上看到的例子。

如果您愿意，这可能会更好地说明我正在寻找的内容 fiddle

Answer 1

我不确定我的解决方案是否会回答您的查询，但考虑到上述情况，我尝试使用自定义事件。此外，如果提供了任何处理程序，我发现 dispatchEvent returned 值中存在一些故障。另外，我尝试从处理程序中设置 return false，但这也没有用。下面可能会帮助您稍微了解 javascript 自定义事件 :

检查这个 link 的工作代码：

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 清楚地提到 return 值是 false 如果至少有一个处理此事件的事件处理程序事件名为 Event.preventDefault()。否则它 returns true。那对我不起作用。希望对您有所帮助！

为构造函数创建自定义 "event"

Creating a custom "event" for a constructor

javascript

events