Basic events

element.click()

returns itself

Events can be bound to elements as follows:

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

Removing it is quite as easy:

element.click(null)

All available other events are: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchmove, touchleave, touchend and touchcancel...

Event listeners

element.fire()

returns itself

Fire an event:

element.fire(event)

Optionally, an object with arbitrary data can be passed as the second argument:

element.fire(event, { arbitrary: data })

element.event()

returns event

When a given event is fired using fire(), the passed event will be stored locally. The event() method provides access to that stored event:

var event = element.event()

element.on()

returns itself

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

element.on('click', click)

Note: The context of this in the callback is bound to the element. You can change this context by applying your own object:

element.on('click', click, window) // context of this is window

element.off()

returns itself

Unbinding events is just as easy:

element.off('click', click)

Or to unbind all listeners for a given event:

element.off('click')

Or even unbind all listeners for all events:

element.off()

Other elements

Adding and removing event listeners from elements also works on other elements

SVG.on()

SVG.on(window, 'click', click)

SVG.off()

SVG.off(window, 'click', click)

Custom events

You can even use your own events.

Just add an event listener for your event:

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

Now you are ready to fire the event whenever you need:

function whenSomethingHappens() {
  element.fire('myevent')
}

// or if you want to pass an event
function whenSomethingHappens(event) {
  element.fire(event)
}

You can also pass some data to the event:

function whenSomethingHappens() {
  element.fire('myevent', {some:'data'})
}

element.on('myevent', function(e) {
  alert(e.detail.some) // outputs 'data'
})

SVG.js supports namespaced events following the syntax event.namespace.

A namespaced event behaves like a normal event with the difference that you can remove it without touching handlers from other namespaces.

// attach
element.on('myevent.namespace', function(e) {
  // do something
})

// detach all handlers of namespace for myevent
element.off('myevent.namespace')

// detach all handlers of namespace
element.off('.namespace')

// detach all handlers including all namespaces
element.off('myevent')

However, you can't fire a specific namespaced event. Calling element.fire('myevent.namespace') won't do anything while element.fire('myevent') works and fires all attached handlers of the event

Important: always make sure you namespace your event to avoid conflicts. Preferably use something very specific. So event.wicked for example would be better than something generic like event.svg.