javascript - 如何将自定义事件添加到 svg.js

Question

我正在测试 svg.js库，并发现声明 custom events 的问题。这是the fiddle 。单击第一个圆圈应该会更改颜色并且它可以工作:

circleOne.click(function() {
  this.fill({ color: '#f06' })
})

单击第二个圆圈应该会触发自定义事件，但事实并非如此:

var circleTwo = SVG.select('circle.circle-01');

circleTwo.on('myevent', function() {
  alert('ta-da!')
})

function testMe() {
  circleTwo.fire('myevent')
}

将 .fire 更改为 .event 也没有帮助。有什么建议么？提前致谢。

Answer 1

您从不使用 testMe 函数来触发您的事件:)

当事件发生时，浏览器定义的事件已经被触发，对于自定义事件，您已经正确定义了它触发时会发生什么(警报)，但如果您希望它在某个时刻发生，则必须触发它。你也做了触发功能，但你从来没有使用过它。

您可以在浏览器定义的触发器上触发它，但然后只需使用这些事件，而不是定义自定义。

自定义事件适用于不同的用例。例如，您检测到一个对象在 10 秒内没有被触摸，并且您想通知代码的其他部分对此使用react。默认情况下未定义该事件，您可以定义它并使用自定义代码进行检查，以便在满足条件时触发该事件。

尝试触发事件，例如点击事件，或者只是为了测试，将其放在 scrypt 的末尾:

testMe();

现在，当脚本加载到该点并执行触发器函数时，您已经触发了自定义事件。