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.dispatch()

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)
  doNothing()

element.on()

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)

element.off()

returns itself

Unbinding events is just as easy:

element.off('click', click)

Or to unbind all listeners for a given event type:

element.off('click')

Or multiple event types:

element.off(['click', 'mouseover'])
element.off('click mouseover')

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

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() {
  element.fire('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
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.