how to add custom events to svg.js

Question

I'm testing svg.js library, and have found problems declaring custom events . Here is the fiddle . Clicking on the first circle should change the color and it works:

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

Clicking the second circle should fire the custom event, but it doesn't:

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

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

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

Changing .fire to .event doesn't help either. Any suggestions? Thanks in advance.

Answer 1

You never use testMe function to fire your event :)

Browser defined events are already fired when an event happens, for the custom event you have correctly defined what happens (alert) when it fires but if you intend it to go off at some point you have to fire it. You also made trigger function but you never used it.

You can fire it on browser defined triggers BUT then simply rather use those events, don't define custom.

Custom events are intended for different use cases. For example, you detected an object is untouched for 10 sec and you wanna notify some other part of the code to react to it. That event is not defined by default, you define it and have custom code checking that fire the event when the condition is met.

Try firing your event on for example click event or simply for testing put this at the end of the scrypt:

testMe();

Now you have fired your custom event when the script loads to that point and executes trigger function.