Skip to content

Instantly share code, notes, and snippets.

Forked from paulirish/bling.js
Last active September 29, 2019 03:33
Show Gist options
  • Save KittyGiraudel/7d867cda127e64d38f28 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/7d867cda127e64d38f28 to your computer and use it in GitHub Desktop.
bling dot 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 [] document.querySelectorAll('.foo'), function(){ … rodeo.

What bling'll do for ya:

// 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) {
  // …

It doesn't do anything else. This is not a jQuery equivalent.


  • 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:
  • 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.
  • I'm using semi-standard for style. I tried standard sans-semicolons, but can't get used to it.
/* bling.js */
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);
"name": "blingdotjs",
"version": "0.1.0",
"author": "Paul Irish"
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') = 'one'
var input2 = document.createElement('input') = 'two'
$('input').on('click', function (e) {
console.log('PASS!',, ' 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)
setTimeout(function () { simulateClick(input2) }, 500)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment