]> source.dussan.org Git - svg.js.git/commitdiff
Added event binding to the event module
authorwout <wout@impinc.co.uk>
Wed, 9 Jan 2013 19:40:02 +0000 (20:40 +0100)
committerwout <wout@impinc.co.uk>
Wed, 9 Jan 2013 19:40:02 +0000 (20:40 +0100)
README.md

index b11a5a508567a7d758dd9e304f4f21b882acd65f..700d70be2e1a029f31f0b2d98ca4547539decfe8 100644 (file)
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 A lightweight library for manipulating and animating SVG.
 
-Svg.js has no dependencies and aims to be under 5k gzipped. The base library is 2.7k gzipped, with all bells and whistles about 4.6k.
+Svg.js has no dependencies and aims to be under 5k gzipped. The base library is 2.7k gzipped, with all bells and whistles about 4.7k.
 
 Svg.js is licensed under the terms of the MIT License.
 
@@ -608,7 +608,7 @@ _This functionality requires the patterns.js module which is included in the def
 
 
 ## Events
-All usual events are accessible on elements:
+Events can be bound to elements as follows:
 
 ```javascript
 rect.click(function() {
@@ -616,6 +616,36 @@ rect.click(function() {
 });
 ```
 
+You can also bind event listeners to elements:
+
+```javascript
+var click = function() {
+  rect.fill({ color: '#f06' });
+};
+
+rect.on('click', click);
+```
+
+Note that the context of event listeners is not the same as events, which are applied directly to the element. Therefore `this` will not refer to the element when using event listeners.
+
+Unbinding events is just as easy:
+
+```javascript
+rect.off('click', click);
+```
+
+But there is more to event listeners. You can bind events to html elements as well:
+
+```javascript
+SVG.on(window, 'click', click);
+```
+
+Obviously unbinding is practically the same:
+
+```javascript
+SVG.off(window, 'click', click);
+```
+
 Available events are `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `touchstart`, `touchend`, `touchmove` and `touchcancel`.
 
 
@@ -667,6 +697,7 @@ Here are a few nice plugins that are available for svg.js:
 
 - [svg.shapes.js](https://github.com/wout/svg.shapes.js) for more polygon based shapes.
 - [svg.easing.js](https://github.com/wout/svg.easing.js) for more easing methods on animations.
+- [svg.draggable.js](https://github.com/wout/svg.draggable.js) for more easing methods on animations.
 
 
 
@@ -716,7 +747,7 @@ _The Rakefile has been borrowed from [madrobby's](https://github.com/madrobby) [
 
 
 ## To-do
-- Draggable module (make elements and groups draggable)
+- Instance module
 - Text on path module (write text along paths)