Basic events

returns itself

Events can be bound to elements as follows: {
  this.fill({ color: '#f06' })

Removing it is quite as easy:

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

Event listeners

returns itself

Fire an event:

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


returns event

Also fires an event on the element like fire() but returns the event instead. You can then check for e.g. defaultPrevented on the event:

var event = element.dispatch(event)
if (event.defaultPrevented)


returns itself

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

element.on('click', click)

Passing multiple event types can be done with either an array:

element.on(['click', 'mouseover'], handler)

Or a space delimited string:

element.on('click mouseover', handler)

Note: The context of this in the callback is bound to the element. Alternatively, a third argument can be passed to define a custom context:

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

returns itself

Unbinding events is just as easy:'click', click)

Or to unbind all listeners for a given event type:'click')

Or multiple event types:['click', 'mouseover'])'click mouseover')

Or even unbind all listeners for all events:

Other elements

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


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

Custom events

You can even use your own events.

Just add an event listener for your event:

element.on('myevent', function() {

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

function whenSomethingHappens() {'myevent')

// or if you want to pass an event
function whenSomethingHappens(event) {

You can also pass some data to the event:

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

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

You can also change the options like cancelable (which defaults to true in svg.js) or other parameters by passing a third parameter

function whenSomethingHappens() {'myevent', {some:'data'}, {cancelable: false})

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'myevent.namespace')

// detach all handlers of namespace'.namespace')

// detach all handlers including all namespaces'myevent')

However, you can't fire a specific namespaced event. Calling'myevent.namespace') won't do anything while'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.

Fork me on GitHub