paulirish · September 13, 2025 12:13 · May 26, 2025 · Nov 22, 2024 · Jul 23, 2024 · Aug 4, 2016
diff --git a/readme.md b/readme.md
@@ -7,8 +7,8 @@ Because you want the $ of jQuery without the jQuery.
 You may be interested in bling.js if you get tired of the `Array.from(document.querySelectorAll('.foo')).forEach(… ` rodeo. It does this:
 
 ```js
-// forEach over the qSA result, directly.
-document.querySelectorAll('input').forEach(el => /* ... */);
+// Array methods w/ the qSA result
+document.querySelectorAll('input').map(el => /* ... */);
 
 // on() rather than addEventListener()
 document.body.on('dblclick', evt => /* ... */);

diff --git a/bling.js b/bling.js
@@ -1,15 +1,6 @@
 /* bling.js */
-
-window.$ = document.querySelectorAll.bind(document);
-
-Node.prototype.on = window.on = function (name, fn) {
-  this.addEventListener(name, fn);
-};
-
+window.$ = document.querySelector.bind(document);
+window.$$ = document.querySelectorAll.bind(document);
+Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
 NodeList.prototype.__proto__ = Array.prototype;
-
-NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
-  this.forEach(function (elem, i) {
-    elem.on(name, fn);
-  });
-};
+NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };
diff --git a/readme.md b/readme.md
@@ -13,22 +13,46 @@ document.querySelectorAll('input').forEach(el => /* ... */);
 // on() rather than addEventListener()
 document.body.on('dblclick', evt => /* ... */);
 
-// classic $ + on()
-$('p').on('click', el => /* ... */);
+// classic jQuery + on()
+$$('p').on('click', el => /* ... */);
 ```
 
 It doesn't do anything else. This is **not** a jQuery equivalent.
 
 #### Notes:
 * `on()` works on elements, `document`, `window`, and results from `querySelector` & `querySelectorAll`.
-* `$` is qSA so if you're grabbing a single element you'll have to `[0]` it.
-* Bling plays well with authoring ES6
+* ~`$` is qSA so if you're grabbing a single element you'll have to `[0]` it.~
+   * In Nov 2024 I made a breaking change (ya know, 10yrs later) where $$ is qSA and $ is qS. This matches how these [symbols are defined within DevTools Console](https://developer.chrome.com/docs/devtools/console/utilities#querySelector-function).
+* Bling plays well with authoring ES6 (and beyond!)
 * Resig explored this stuff a while ago: [github.com/jeresig/nodelist](http://github.com/jeresig/nodelist)
-* Bling doesn't work on Android 2.3 or iOS 5.0. Works everywhere else including IE8 (assuming Function.bind)
+* Bling works everywhere.
 
 #### Nerdy implementation notes:
 * The NodeList prototype usually inherits from Object, so we move it to Array.
-* I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget
+* I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget. _2024 Paul here: whelp, they added iterable to NodeList but not EventTarget. seems good._
 * Setting `Node.prototype.on = EventTarget.prototype.addEventListener` is awesome. It works in Chrome/FF but not yet in IE/Safari.
 * I haven't set up any off() or trigger() to map to `dispatchEvent` & `removeEventListener`. I'm OK with that.
-* I'm using [semi-standard](https://github.com/Flet/semistandard) for style. I tried standard sans-semicolons, but can't get used to it.
+   * See comments for alternatives where folks have more fleshed out editions of this.
+
+
+#### Typescript declaration
+
+(Added 2024..)
+
+```ts
+declare global {
+  interface Node {
+    on(name: string, fn: EventListenerOrEventListenerObject): void;
+  }
+
+  interface Window {
+    on(name: string, fn: EventListenerOrEventListenerObject): void;
+    $(selector: string): Element | null;
+    $$(selector: string): NodeListOf<Element>;
+  }
+
+  interface NodeList extends Array<Node> {
+    on(name: string, fn: EventListenerOrEventListenerObject): void;
+  }
+}
+```
diff --git a/bling.js b/bling.js
@@ -4,12 +4,12 @@ window.$ = document.querySelectorAll.bind(document);
 
 Node.prototype.on = window.on = function (name, fn) {
   this.addEventListener(name, fn);
-}
+};
 
 NodeList.prototype.__proto__ = Array.prototype;
 
 NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
   this.forEach(function (elem, i) {
     elem.on(name, fn);
   });
-}
+};
diff --git a/readme.md b/readme.md
@@ -4,7 +4,7 @@ Because you want the $ of jQuery without the jQuery.
 
 ------------------------------------
 
-You may be interested in bling.js if you get tired of the `[].slice.call( document.querySelectorAll('.foo'), function(){ … ` rodeo. It does this:
+You may be interested in bling.js if you get tired of the `Array.from(document.querySelectorAll('.foo')).forEach(… ` rodeo. It does this:
 
 ```js
 // forEach over the qSA result, directly.

diff --git a/readme.md b/readme.md
@@ -4,11 +4,7 @@ Because you want the $ of jQuery without the jQuery.
 
 ------------------------------------
 
-You could call this a microlibrary, but really it's just some code that works.
-
-You may be interested in this library if you get tired of the `[].slice.call( document.querySelectorAll('.foo'), function(){ … ` rodeo.
-
-What bling'll do for ya:
+You may be interested in bling.js if you get tired of the `[].slice.call( document.querySelectorAll('.foo'), function(){ … ` rodeo. It does this:
 
 ```js
 // forEach over the qSA result, directly.

diff --git a/readme.md b/readme.md
@@ -12,13 +12,13 @@ What bling'll do for ya:
 
 ```js
 // forEach over the qSA result, directly.
-document.querySelectorAll('input').forEach(el => /* ... */)
+document.querySelectorAll('input').forEach(el => /* ... */);
 
 // on() rather than addEventListener()
-document.body.on('dblclick', evt => /* ... */)
+document.body.on('dblclick', evt => /* ... */);
 
 // classic $ + on()
-$('p').on('click', el => /* ... */)
+$('p').on('click', el => /* ... */);
 ```
 
 It doesn't do anything else. This is **not** a jQuery equivalent.

diff --git a/readme.md b/readme.md
@@ -12,19 +12,13 @@ What bling'll do for ya:
 
 ```js
 // forEach over the qSA result, directly.
-document.querySelectorAll('input').forEach(function (el) {
-  // …
-})
+document.querySelectorAll('input').forEach(el => /* ... */)
 
 // on() rather than addEventListener()
-document.body.on('dblclick', function (e) {
-  // …
-})
+document.body.on('dblclick', evt => /* ... */)
 
 // classic $ + on()
-$('p').on('click', function (e) {
-  // …
-})
+$('p').on('click', el => /* ... */)
 ```
 
 It doesn't do anything else. This is **not** a jQuery equivalent.

diff --git a/test.js b/test.js
@@ -1,34 +0,0 @@
-/*
-    npm install -g browser-repl
-    cat bling.js test.js  | uglifyjs | pbcopy   # copy bling & tests to clipboard
-    repl  # see list of browsers to try it in
-    repl ie
-    # paste and zoooom!
-*/
-
-var input1 = document.createElement('input')
-input1.id = 'one'
-document.body.appendChild(input1)
-
-var input2 = document.createElement('input')
-input2.id = 'two'
-document.body.appendChild(input2)
-
-$('input').on('click', function (e) {
-  console.log('PASS!', e.target.id, ' clicked! ')
-})
-window.on('click', function (e) {
-  console.log('Pass! window received click too!')
-})
-
-// either click 'em or this is for testing…
-
-function simulateClick (elem) {
-  var evt = document.createEvent('MouseEvents')
-  evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
-  var canceled = !elem.dispatchEvent(evt)
-}
-
-simulateClick(input1)
-
-setTimeout(function () { simulateClick(input2)  }, 500)

diff --git a/bling.js b/bling.js
@@ -1,15 +1,15 @@
 /* bling.js */
 
-window.$ = document.querySelectorAll.bind(document)
+window.$ = document.querySelectorAll.bind(document);
 
 Node.prototype.on = window.on = function (name, fn) {
-  this.addEventListener(name, fn)
+  this.addEventListener(name, fn);
 }
 
-NodeList.prototype.__proto__ = Array.prototype
+NodeList.prototype.__proto__ = Array.prototype;
 
 NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
   this.forEach(function (elem, i) {
-    elem.on(name, fn)
-  })
+    elem.on(name, fn);
+  });
 }
diff --git a/readme.md b/readme.md
@@ -41,4 +41,4 @@ It doesn't do anything else. This is **not** a jQuery equivalent.
 * I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget
 * Setting `Node.prototype.on = EventTarget.prototype.addEventListener` is awesome. It works in Chrome/FF but not yet in IE/Safari.
 * I haven't set up any off() or trigger() to map to `dispatchEvent` & `removeEventListener`. I'm OK with that.
-* I'm using [standard](https://github.com/feross/standard) for style. I love semicolons too, but am giving it a go without them here. TBH, I'll probably end up on [semi-standard](https://github.com/Flet/semistandard) in the end.
+* I'm using [semi-standard](https://github.com/Flet/semistandard) for style. I tried standard sans-semicolons, but can't get used to it.
diff --git a/readme.md b/readme.md
@@ -27,6 +27,8 @@ $('p').on('click', function (e) {
 })
 ```
 
+It doesn't do anything else. This is **not** a jQuery equivalent.
+
 #### Notes:
 * `on()` works on elements, `document`, `window`, and results from `querySelector` & `querySelectorAll`.
 * `$` is qSA so if you're grabbing a single element you'll have to `[0]` it.

diff --git a/readme.md b/readme.md
@@ -1,4 +1,3 @@
-
 # bling.js
 
 Because you want the $ of jQuery without the jQuery.
@@ -40,3 +39,4 @@ $('p').on('click', function (e) {
 * I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget
 * Setting `Node.prototype.on = EventTarget.prototype.addEventListener` is awesome. It works in Chrome/FF but not yet in IE/Safari.
 * I haven't set up any off() or trigger() to map to `dispatchEvent` & `removeEventListener`. I'm OK with that.
+* I'm using [standard](https://github.com/feross/standard) for style. I love semicolons too, but am giving it a go without them here. TBH, I'll probably end up on [semi-standard](https://github.com/Flet/semistandard) in the end.
diff --git a/bling.js b/bling.js
@@ -1,28 +1,15 @@
-// bling
-
-// the kind of thing you toss into the page as you start prototyping
+/* bling.js */
 
 window.$ = document.querySelectorAll.bind(document)
 
 Node.prototype.on = window.on = function (name, fn) {
   this.addEventListener(name, fn)
 }
 
-// NodeList needs all Array goodies
 NodeList.prototype.__proto__ = Array.prototype
 
-// NodeList needs EventTarget goodies but iterated
 NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
   this.forEach(function (elem, i) {
     elem.on(name, fn)
   })
 }
-
-
-
-
-// Notes:
-//   it's all resig's fault.  github.com/jeresig/nodelist
-//   setting `Node.prototype.on = EventTarget.prototype.addEventListener` would be sweet but, no funciona in IE/Saf
-//   not done: dispatchEvent & removeEventListener shortcuts, but who caaares
-//   doesn't work on Android 2.3 or iOS 5.0. Works everywhere else including IE8.
diff --git a/example.js b/example.js
@@ -1,17 +0,0 @@
-// We should be able to forEach on the qSA result.
-document.querySelectorAll('input').forEach(function (el) {
-  el.readOnly = true
-})
-
-// addEventListhistakestoolongtotype. on() method
-document.body.on('dblclick', function (e) {
-  console.log('double clicked the body')
-})
-
-// classic Bling + on()
-$('p').on('click', function (e) {
-  e.currentTarget.hidden = true
-})
-
-
-

diff --git a/readme.md b/readme.md
@@ -0,0 +1,42 @@
+
+# bling.js
+
+Because you want the $ of jQuery without the jQuery.
+
+------------------------------------
+
+You could call this a microlibrary, but really it's just some code that works.
+
+You may be interested in this library if you get tired of the `[].slice.call( document.querySelectorAll('.foo'), function(){ … ` rodeo.
+
+What bling'll do for ya:
+
+```js
+// forEach over the qSA result, directly.
+document.querySelectorAll('input').forEach(function (el) {
+  // …
+})
+
+// on() rather than addEventListener()
+document.body.on('dblclick', function (e) {
+  // …
+})
+
+// classic $ + on()
+$('p').on('click', function (e) {
+  // …
+})
+```
+
+#### Notes:
+* `on()` works on elements, `document`, `window`, and results from `querySelector` & `querySelectorAll`.
+* `$` is qSA so if you're grabbing a single element you'll have to `[0]` it.
+* Bling plays well with authoring ES6
+* Resig explored this stuff a while ago: [github.com/jeresig/nodelist](http://github.com/jeresig/nodelist)
+* Bling doesn't work on Android 2.3 or iOS 5.0. Works everywhere else including IE8 (assuming Function.bind)
+
+#### Nerdy implementation notes:
+* The NodeList prototype usually inherits from Object, so we move it to Array.
+* I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget
+* Setting `Node.prototype.on = EventTarget.prototype.addEventListener` is awesome. It works in Chrome/FF but not yet in IE/Safari.
+* I haven't set up any off() or trigger() to map to `dispatchEvent` & `removeEventListener`. I'm OK with that.
diff --git a/test.js b/test.js
@@ -1,4 +1,3 @@
-
 /*
     npm install -g browser-repl
     cat bling.js test.js  | uglifyjs | pbcopy   # copy bling & tests to clipboard
@@ -7,34 +6,29 @@
     # paste and zoooom!
 */
 
-var input1 = document.createElement('input');
-input1.id = 'one';
-document.body.appendChild(input1);
-
-var input2 = document.createElement('input');
-input2.id = 'two';
-document.body.appendChild(input2);
+var input1 = document.createElement('input')
+input1.id = 'one'
+document.body.appendChild(input1)
 
+var input2 = document.createElement('input')
+input2.id = 'two'
+document.body.appendChild(input2)
 
-$('input').on('click', function(e) {
-    console.log('PASS!', e.target.id, ' clicked! ');
+$('input').on('click', function (e) {
+  console.log('PASS!', e.target.id, ' clicked! ')
+})
+window.on('click', function (e) {
+  console.log('Pass! window received click too!')
 })
-window.on('click', function(e){ 
-    console.log('Pass! window received click too!')
-});
-
-
-
 
 // either click 'em or this is for testing…
 
-function simulateClick(elem) {
-    var evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-    var canceled = !elem.dispatchEvent(evt);
+function simulateClick (elem) {
+  var evt = document.createEvent('MouseEvents')
+  evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
+  var canceled = !elem.dispatchEvent(evt)
 }
 
-
 simulateClick(input1)
 
-setTimeout(function(){ simulateClick(input2)  }, 500);
+setTimeout(function () { simulateClick(input2)  }, 500)
diff --git a/bling.js b/bling.js
@@ -2,10 +2,9 @@
 
 // the kind of thing you toss into the page as you start prototyping
 
+window.$ = document.querySelectorAll.bind(document)
 
-Window.prototype.$ = document.querySelectorAll.bind(document)
-
-Node.prototype.on = Window.prototype.on = function (name, fn) {
+Node.prototype.on = window.on = function (name, fn) {
   this.addEventListener(name, fn)
 }
 
@@ -17,12 +16,13 @@ NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn
   this.forEach(function (elem, i) {
     elem.on(name, fn)
   })
-} // 
+}
 
 
 
 
 // Notes:
 //   it's all resig's fault.  github.com/jeresig/nodelist
 //   setting `Node.prototype.on = EventTarget.prototype.addEventListener` would be sweet but, no funciona in IE/Saf
-//   not done: dispatchEvent & removeEventListener shortcuts, but who caaares
+//   not done: dispatchEvent & removeEventListener shortcuts, but who caaares
+//   doesn't work on Android 2.3 or iOS 5.0. Works everywhere else including IE8.
diff --git a/test.js b/test.js
@@ -1,9 +1,11 @@
 
-function simulateClick(elem) {
-    var evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-    var canceled = !elem.dispatchEvent(evt);
-}
+/*
+    npm install -g browser-repl
+    cat bling.js test.js  | uglifyjs | pbcopy   # copy bling & tests to clipboard
+    repl  # see list of browsers to try it in
+    repl ie
+    # paste and zoooom!
+*/
 
 var input1 = document.createElement('input');
 input1.id = 'one';
@@ -17,7 +19,9 @@ document.body.appendChild(input2);
 $('input').on('click', function(e) {
     console.log('PASS!', e.target.id, ' clicked! ');
 })
-
+window.on('click', function(e){ 
+    console.log('Pass! window received click too!')
+});
 
 
 
@@ -33,4 +37,4 @@ function simulateClick(elem) {
 
 simulateClick(input1)
 
-setTimeout(function(){ simulateClick(input2)  }, 500);
+setTimeout(function(){ simulateClick(input2)  }, 500);
diff --git a/bling.js b/bling.js
@@ -1,15 +1,13 @@
 // bling
+
 // the kind of thing you toss into the page as you start prototyping
-// also a prollyfill.
 
-//   it's all resig's fault.  github.com/jeresig/nodelist
 
 Window.prototype.$ = document.querySelectorAll.bind(document)
 
-Node.prototype.on = function (name, fn) {
+Node.prototype.on = Window.prototype.on = function (name, fn) {
   this.addEventListener(name, fn)
 }
-// setting to EventTarget.prototype.addEventListener; directly would be nice, but not supported everywhere.
 
 // NodeList needs all Array goodies
 NodeList.prototype.__proto__ = Array.prototype
@@ -19,7 +17,12 @@ NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn
   this.forEach(function (elem, i) {
     elem.on(name, fn)
   })
-} // todo: dispatchEvent & removeEventListener
+} // 
 
 
 
+
+// Notes:
+//   it's all resig's fault.  github.com/jeresig/nodelist
+//   setting `Node.prototype.on = EventTarget.prototype.addEventListener` would be sweet but, no funciona in IE/Saf
+//   not done: dispatchEvent & removeEventListener shortcuts, but who caaares
diff --git a/bling.js b/bling.js
@@ -9,6 +9,7 @@ Window.prototype.$ = document.querySelectorAll.bind(document)
 Node.prototype.on = function (name, fn) {
   this.addEventListener(name, fn)
 }
+// setting to EventTarget.prototype.addEventListener; directly would be nice, but not supported everywhere.
 
 // NodeList needs all Array goodies
 NodeList.prototype.__proto__ = Array.prototype
@@ -19,3 +20,6 @@ NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn
     elem.on(name, fn)
   })
 } // todo: dispatchEvent & removeEventListener
+
+
+
diff --git a/example.js b/example.js
@@ -10,5 +10,8 @@ document.body.on('dblclick', function (e) {
 
 // classic Bling + on()
 $('p').on('click', function (e) {
-  p.hidden = true
+  e.currentTarget.hidden = true
 })
+
+
+
diff --git a/test.js b/test.js
@@ -0,0 +1,36 @@
+
+function simulateClick(elem) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    var canceled = !elem.dispatchEvent(evt);
+}
+
+var input1 = document.createElement('input');
+input1.id = 'one';
+document.body.appendChild(input1);
+
+var input2 = document.createElement('input');
+input2.id = 'two';
+document.body.appendChild(input2);
+
+
+$('input').on('click', function(e) {
+    console.log('PASS!', e.target.id, ' clicked! ');
+})
+
+
+
+
+
+// either click 'em or this is for testing…
+
+function simulateClick(elem) {
+    var evt = document.createEvent("MouseEvents");
+    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    var canceled = !elem.dispatchEvent(evt);
+}
+
+
+simulateClick(input1)
+
+setTimeout(function(){ simulateClick(input2)  }, 500);
diff --git a/bling.js b/bling.js
@@ -1,4 +1,8 @@
-// blinggggggggggg
+// bling
+// the kind of thing you toss into the page as you start prototyping
+// also a prollyfill.
+
+//   it's all resig's fault.  github.com/jeresig/nodelist
 
 Window.prototype.$ = document.querySelectorAll.bind(document)
 

diff --git a/bling.js b/bling.js
@@ -1,17 +1,17 @@
 // blinggggggggggg
 
-Window.prototype.$ = document.querySelectorAll.bind(document);
+Window.prototype.$ = document.querySelectorAll.bind(document)
 
 Node.prototype.on = function (name, fn) {
-	this.addEventListener(name, fn);
+  this.addEventListener(name, fn)
 }
 
 // NodeList needs all Array goodies
-NodeList.prototype.__proto__ = Array.prototype;
+NodeList.prototype.__proto__ = Array.prototype
 
 // NodeList needs EventTarget goodies but iterated
 NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
-    this.forEach(function(elem, i) { 
-      elem.on(name, fn); 
-    });
-}; // todo: dispatchEvent & removeEventListener
+  this.forEach(function (elem, i) {
+    elem.on(name, fn)
+  })
+} // todo: dispatchEvent & removeEventListener
diff --git a/example.js b/example.js
@@ -1,18 +1,14 @@
-
-
 // We should be able to forEach on the qSA result.
-document.querySelectorAll('input').forEach(function(el){
-	el.readOnly = true
+document.querySelectorAll('input').forEach(function (el) {
+  el.readOnly = true
 })
 
 // addEventListhistakestoolongtotype. on() method
-document.body.on('dblclick', function(e){ 
-	console.log('double clicked the body');
+document.body.on('dblclick', function (e) {
+  console.log('double clicked the body')
 })
 
 // classic Bling + on()
-$('p').on('click', function(e){
-    p.hidden = true;
-});
-
-
+$('p').on('click', function (e) {
+  p.hidden = true
+})
diff --git a/bling.js b/bling.js
@@ -0,0 +1,17 @@
+// blinggggggggggg
+
+Window.prototype.$ = document.querySelectorAll.bind(document);
+
+Node.prototype.on = function (name, fn) {
+	this.addEventListener(name, fn);
+}
+
+// NodeList needs all Array goodies
+NodeList.prototype.__proto__ = Array.prototype;
+
+// NodeList needs EventTarget goodies but iterated
+NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
+    this.forEach(function(elem, i) { 
+      elem.on(name, fn); 
+    });
+}; // todo: dispatchEvent & removeEventListener
diff --git a/example.js b/example.js
@@ -0,0 +1,18 @@
+
+
+// We should be able to forEach on the qSA result.
+document.querySelectorAll('input').forEach(function(el){
+	el.readOnly = true
+})
+
+// addEventListhistakestoolongtotype. on() method
+document.body.on('dblclick', function(e){ 
+	console.log('double clicked the body');
+})
+
+// classic Bling + on()
+$('p').on('click', function(e){
+    p.hidden = true;
+});
+
+