readme.md

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:

// 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.

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
• 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 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 in the end.

bling.js

// bling.js
//
// fork of https://gist.github.com/Gwash3189/98922b1078c4327dd0dd
// which is a fork of https://gist.github.com/paulirish/12fb951a8b893a454b32

window.$ = document.querySelectorAll.bind(document)

Node.prototype.on = window.on = function(name, fn) {
  var _this = this;

  // Will bind to multiple events like 'click hover'
  name.split(' ').forEach(function(name) {
    _this.addEventListener(name, fn);
  });
};

Node.prototype.off = window.off = function(name, fn) {
  var _this = this;

  name.split(' ').forEach(function(name) {
    _this.removeEventListener(name, fn);
  });
};

Node.prototype.trigger = window.trigger = function(event) {
  // Only supports mouse events
  this.dispatchEvent(new MouseEvent(event));
};

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.off = NodeList.prototype.removeEventListener = function(name, fn) {
  this.forEach(function(elem, i) {
    elem.off(name, fn);
  });
};

NodeList.prototype.trigger = NodeList.prototype.trigger = function(name) {
  this.forEach(function(elem) {
    elem.trigger(name);
  });
};