aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2013-01-09 20:40:02 +0100
committerwout <wout@impinc.co.uk>2013-01-09 20:40:02 +0100
commit6d40c805386f440595d2f9a5c35e387d4a253736 (patch)
tree371a2d26be17956415c8ca3f129e95800ee726d0
parent999f4b8b44a529fe2af2f32f21e76804c8a85ea6 (diff)
downloadsvg.js-6d40c805386f440595d2f9a5c35e387d4a253736.tar.gz
svg.js-6d40c805386f440595d2f9a5c35e387d4a253736.zip
Added event binding to the event module
-rw-r--r--README.md37
1 files changed, 34 insertions, 3 deletions
diff --git a/README.md b/README.md
index b11a5a5..700d70b 100644
--- 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)