/*
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)
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) {
// …
})
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.Node.prototype.on = EventTarget.prototype.addEventListener
is awesome. It works in Chrome/FF but not yet in IE/Safari.dispatchEvent
& removeEventListener
. I'm OK with that./* 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)
})
}