Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit f62a8542af75626200e3e3e75163cc9a6a735d40 0 parents
@tj tj authored
2  .gitignore
@@ -0,0 +1,2 @@
+components
+build
11 Makefile
@@ -0,0 +1,11 @@
+
+build: components index.js
+ @component build
+
+components: component.json
+ @component install --dev
+
+clean:
+ rm -fr build components
+
+.PHONY: clean
38 Readme.md
@@ -0,0 +1,38 @@
+
+# delegate
+
+ Low-level event delegation component.
+
+## Installation
+
+ $ component install component/delegate
+
+## Example
+
+```js
+var delegate = require('delegate');
+var ul = document.querySelector('ul');
+var n = 0;
+
+var fn = delegate.bind(ul, 'li a', 'click', function(e){
+ console.log(e.target);
+ if (++n == 3) {
+ console.log('unbind');
+ delegate.unbind('click', fn, false);
+ }
+}, false);
+```
+
+## API
+
+### .bind(el, selector, type, callback, [capture])
+
+ Bind and return a callback which may be passed to `.unbind()`.
+
+### .unbind(type, callback, [capture])
+
+ Unbind.
+
+## License
+
+ MIT
13 component.json
@@ -0,0 +1,13 @@
+{
+ "name": "delegate",
+ "repo": "component/delegate",
+ "description": "Event delegation component",
+ "version": "0.0.1",
+ "keywords": ["event", "events", "delegate", "delegation"],
+ "dependencies": {
+ "component/matches-selector": "*"
+ },
+ "scripts": [
+ "index.js"
+ ]
+}
51 index.js
@@ -0,0 +1,51 @@
+
+/**
+ * Module dependencies.
+ */
+
+var matches = require('matches-selector');
+
+/**
+ * Contained by flag.
+ */
+
+var containedBy = 16;
+
+/**
+ * Delegate event `type` to `selector`
+ * and invoke `fn(e)`. A callback function
+ * is returned which may be passed to `.unbind()`.
+ *
+ * @param {Element} el
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} fn
+ * @param {Boolean} capture
+ * @return {Function}
+ * @api public
+ */
+
+exports.bind = function(el, selector, type, fn, capture){
+ document.addEventListener(type, callback, capture);
+
+ function callback(e) {
+ if (el.compareDocumentPosition(e.target) & containedBy) {
+ if (matches(e.target, selector)) fn(e);
+ }
+ }
+
+ return callback;
+};
+
+/**
+ * Unbind event `type`'s callback `fn`.
+ *
+ * @param {String} type
+ * @param {Function} fn
+ * @param {Boolean} capture
+ * @api public
+ */
+
+exports.unbind = function(type, fn, capture){
+ document.removeEventListener(type, fn, capture);
+};
37 test/index.html
@@ -0,0 +1,37 @@
+<html>
+ <head>
+ <title>Event</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ </head>
+ <body>
+ <ul>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+
+ <ul>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+
+ <button>Button</button>
+
+ <script src="../build/build.js"></script>
+
+ <script>
+ var delegate = require('delegate');
+ var ul = document.querySelector('ul');
+ var n = 0;
+
+ var fn = delegate.bind(ul, 'li a', 'click', function(e){
+ console.log(e.target);
+ if (++n == 3) {
+ console.log('unbind');
+ delegate.unbind('click', fn, false);
+ }
+ }, false);
+ </script>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.