improved SVG.on and el.on (#727)

- `SVG.on()` calls the listener in the context of the passed object. el.on always uses the svg.js object as context
- `SVG.on()` and `el.on()` now accepts multiple comma or space seperated events e.g. "mousedown, foo bar" (#727)

1 files changed, 25 insertions, 23 deletions

diff --git a/src/event.js b/src/event.js
index 60f7a69..aec410b 100644
--- a/src/event.js
+++ b/src/event.js
@@ -17,7 +17,7 @@
   // add event to SVG.Element
   SVG.Element.prototype[event] = function(f) {
     // bind event to element rather than element node
-    SVG.on(this.node, event, f)
+    SVG.on(this, event, f)
     return this
   }
 })
@@ -28,27 +28,29 @@ SVG.handlerMap = []
 SVG.listenerId = 0
 
 // Add event binder in the SVG namespace
-SVG.on = function(node, event, listener, binding, options) {
-  // create listener, get object-index
-  var l     = listener.bind(binding || node.instance || node)
-    , index = (SVG.handlerMap.indexOf(node) + 1 || SVG.handlerMap.push(node)) - 1
-    , ev    = event.split('.')[0]
-    , ns    = event.split('.')[1] || '*'
-
-
-  // ensure valid object
-  SVG.listeners[index]         = SVG.listeners[index]         || {}
-  SVG.listeners[index][ev]     = SVG.listeners[index][ev]     || {}
-  SVG.listeners[index][ev][ns] = SVG.listeners[index][ev][ns] || {}
-
-  if(!listener._svgjsListenerId)
-    listener._svgjsListenerId = ++SVG.listenerId
-
-  // reference listener
-  SVG.listeners[index][ev][ns][listener._svgjsListenerId] = l
-
-  // add listener
-  node.addEventListener(ev, l, options || false)
+SVG.on = function(node, events, listener, binding, options) {
+  events.split(SVG.regex.delimiter).forEach(function(event) {
+    // create listener, get object-index
+    var l     = listener.bind(binding || node)
+      , n     = node instanceof SVG.Element ? node.node : node
+      , index = (SVG.handlerMap.indexOf(n) + 1 || SVG.handlerMap.push(n)) - 1
+      , ev    = event.split('.')[0]
+      , ns    = event.split('.')[1] || '*'
+
+    // ensure valid object
+    SVG.listeners[index]         = SVG.listeners[index]         || {}
+    SVG.listeners[index][ev]     = SVG.listeners[index][ev]     || {}
+    SVG.listeners[index][ev][ns] = SVG.listeners[index][ev][ns] || {}
+
+    if(!listener._svgjsListenerId)
+      listener._svgjsListenerId = ++SVG.listenerId
+
+    // reference listener
+    SVG.listeners[index][ev][ns][listener._svgjsListenerId] = l
+
+    // add listener
+    n.addEventListener(ev, l, options || false)
+  })
 }
 
 // Add event unbinder in the SVG namespace
@@ -115,7 +117,7 @@ SVG.off = function(node, event, listener) {
 SVG.extend(SVG.Element, {
   // Bind given event to listener
   on: function(event, listener, binding, options) {
-    SVG.on(this.node, event, listener, binding, options)
+    SVG.on(this, event, listener, binding, options)
 
     return this
   }