Permalink
Browse files

Added an 'on' method for handling event listeners

Thanks to Zbyszek Tenerowicz for the suggestion.
  • Loading branch information...
1 parent 8f06f2c commit bb70a00036308dbcc4b87bcc193d91bfc9ac5def @kylebarrow committed Jul 19, 2012
Showing with 51 additions and 9 deletions.
  1. +33 −5 README.md
  2. +1 −1 chibi-min.js
  3. +17 −3 chibi.js
View
@@ -1,4 +1,4 @@
-# Chibi v0.3
+# Chibi v0.4
#### A tiny JavaScript micro-framework
@@ -9,7 +9,7 @@ Because you understand we are all born with a finite number of keystrokes, you'v
### The sweet, juicy bits ###
* Chibi is really tiny: 5KB minified, 2KB gzipped, small enough to stick inline on single page web apps, saving an extra HTTP request.
* Supports modern desktop and mobile browsers including Chrome, Internet Explorer, Firefox, Opera and Safari (see Browser Support below).
-* Supports creaky old browsers like IE7. Chibi may also support IE6 but this hasn't been tested and I really don't care.
+* Supports creaky old browsers like IE6.
* No animation cruft, instead use CSS transitions like a nice person.
* In modern browsers, Chibi typically executes DOM manipulation 20% to 50% faster than grown-up frameworks.
@@ -20,11 +20,11 @@ Because you understand we are all born with a finite number of keystrokes, you'v
### Browser Support ####
Chibi has been tested with and supports the following browsers:
-* Android Browser 2 or higher
+* Android Browser 2.1 or higher
* Blackberry Browser 6 or higher
* Chrome
* Chrome Android
-* Internet Explorer 7 or higher
+* Internet Explorer 6 or higher
* Internet Explorer Mobile 9 or higher
* Firefox 3 or higher
* Firefox Mobile
@@ -35,6 +35,8 @@ Chibi has been tested with and supports the following browsers:
* Safari Mobile 3 or higher
* Symbian^3 Browser or higher
+Chibi should also work with any other browser that supports `document.querySelectorAll()`.
+
### Using Chibi
Chibi syntax is similar to that pioneered by jQuery: `$(selector).method()`. It intentionally uses the same `$` namespace as jQuery because micro-frameworks and grown-up frameworks should never mix.
@@ -101,7 +103,7 @@ $().loaded(foo);
**find** will return either a single DOM element (only one matching DOM element found), array of DOM elements (more than one matching DOM element found), or false (no matching DOM element found).
-**find** can optionally filter results by first, last, odd and even, useful when working with crappy browsers like IE7 with weak CSS pseudo support.
+**find** can optionally filter results by first, last, odd and even, useful when working with crappy browsers like IE6 with weak CSS pseudo support.
```html
<!DOCTYPE html>
@@ -338,6 +340,32 @@ If only the *html* argument is specified, this will replace the inner HTML of th
</html>
```
+#### $(selector).on(event,listener,*clear*)
+*Adds an event listener to the selector, optionally clears the event listener.*
+
+**on** adds an event listener to the selector. There is no need to use the HTML event format ('on' + event) as Chibi will automatically prefix the event as required. **on** also supports passing `window` and `document` as the selector.
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<script src="chibi-min.js"></script>
+</head>
+<body>
+<p>Foo</p>
+<p>Bar</p>
+<script>
+ function foo() {
+ alert("I've been clicked");
+ }
+
+ $('p').on('click',foo); // adds the 'foo' click event listener to all paragraphs
+ $('p').on('click',foo,true); // removes the 'foo' click event listener from all paragraphs
+</script>
+</body>
+</html>
+```
+
#### $(selector).ajax(url,*method*,*callback*,*nocache*)
*Sends an AJAX request, optionally firing a callback with the XHR `responseText` on success*
View
Oops, something went wrong.
View
@@ -1,10 +1,10 @@
-/* Chibi v0.4, Copyright (C) 2012 Kyle Barrow
+/*Chibi v0.4, Copyright (C) 2012 Kyle Barrow
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
-You should have received a copy of the GNU General Public License along with this program; if not, see <http://www.gnu.org/licenses>. */
+You should have received a copy of the GNU General Public License along with this program; if not, see <http://www.gnu.org/licenses>.*/
(function() {
'use strict';
@@ -400,7 +400,7 @@ You should have received a copy of the GNU General Public License along with thi
if (location) {
// No insertAdjacentHTML support for FF < 8 and IE doesn't allow insertAdjacentHTML table manipulation, so use this instead
// Convert string to node. We can't innerHTML on a document fragment, hope document.parse() makes final spec
- tmpnodes = document.createElement('div');
+ tmpnodes = d.createElement('div');
tmpnodes.innerHTML = value;
while ((tmpnode = tmpnodes.lastChild)) {
@@ -578,6 +578,20 @@ You should have received a copy of the GNU General Public License along with thi
return returnValues(values);
}
},
+ // Event handler
+ on: function(event,fn,clear) {
+
+ (selector === w || selector === d)? nodes = [selector]: 0;
+
+ nodeLoop(function(elm) {
+ if (d.addEventListener) {
+ (clear)? elm.removeEventListener(event, fn, false): elm.addEventListener(event, fn, false);
+ }
+ else if (d.attachEvent) {
+ (clear)? elm.detachEvent('on'+event, fn): elm.attachEvent('on'+event, fn);
+ }
+ },nodes);
+ },
// Basic XHR 1, no file support. Shakes fist at IE
ajax: function(url, method, callback, nocache) {
var xhr,

0 comments on commit bb70a00

Please sign in to comment.