requirebin sketch

index.js

var dom = require('dom');

var bodyContent = '<div class="container">' +
                  '<span class="title">Click the sentence below</span>' +
                  '<br>' +
                  '<span class="msg">Hello classy</span>' +
                  '</div>';

var content = dom(bodyContent)[0];

document.body.appendChild(content);

dom('.container .msg').on('click', function (el) {
  alert('Congratulations! Thanks for clicking');
});

minified.js

require=function e(t,n,r){function i(s,a){if(!n[s]){if(!t[s]){var l="function"==typeof require&&require;if(!a&&l)return l(s,!0);if(o)return o(s,!0);throw Error("Cannot find module '"+s+"'")}var u=n[s]={exports:{}};t[s][0].call(u.exports,function(e){var n=t[s][1][e];return i(n?n:e)},u,u.exports,e,t,n,r)}return n[s].exports}for(var o="function"==typeof require&&require,s=0;r.length>s;s++)i(r[s]);return i}({"Mlv/fm":[function(t,e,n){function r(t,e){if(!t)throw Error("no selector specified");if(t instanceof Array)return new i(t);var n=e;if(n?n instanceof i&&(n=e[0]):n=document,t instanceof NodeList){for(var s=[],a=0;t.length>a;++a)s.push(t[a]);return new i(s,t)}return t instanceof i?t:t.nodeName?new i([t]):("string"==typeof t&&(t=t.trim()),"<"==t.charAt(0)?r(o(t)):"string"==typeof t?r(n.querySelectorAll(t),t):void 0)}function i(t,e){Array.prototype.push.apply(this,t),this.selector=e}var o=t("./lib/domify"),s=t("./lib/classes"),a=t("./lib/matches"),l=t("./lib/event"),u=t("./lib/mutation");n=e.exports=r,n.List=i;var h=i.prototype;h.attr=function(t,e){return void 0===e?this[0].getAttribute(t):(this[0].setAttribute(t,e),this)},h.removeAttr=function(t){return this[0].removeAttribute(t),this},h.data=function(t,e){return this.attr("data-"+t,e)},h.clone=function(){for(var t=[],e=0,n=this.length;n>e;++e)t.push(this[e].cloneNode(!0));return new i(t)},h.at=function(t){return new i([this[t]],this.selector)},h.first=function(){return new i([this[0]],this.selector)},h.last=function(){return new i([this[this.length-1]],this.selector)},h.length=function(){return this.length},h.text=function(t){if(void 0!==t)return this[0].textContent=t,this;for(var e="",n=0;this.length>n;++n)e+=this[n].textContent;return e},h.html=function(t){var e=this[0];if(t){if("string"!=typeof t)throw Error(".html() requires a string");return e.innerHTML=t,this}return e.innerHTML},h.on=function(t,e,n,r){if("string"==typeof e){var i=this[0],o=function(t){var r=t.target;do{if(a(r,e)){var o=function(t){for(var e in t)this[e]=t[e]},s=new o(t);return s.currentTarget=r,n.call(r,s)}r=r.parentElement}while(r&&r!==i)};"mouseenter"===t&&(t="mouseover");for(var s=0;this.length>s;++s)n._delegate=o,l.bind(this[s],t,o,r);return this}r=n,n=e;for(var s=0;this.length>s;++s)l.bind(this[s],t,n,r);return this},h.off=function(t,e,n,r){if("string"==typeof e){for(var i=0;this.length>i;++i)delegate.unbind(this[i],t,n._delegate,r);return this}r=n,n=e;for(var i=0;this.length>i;++i)l.unbind(this[i],t,n,r);return this},h.each=function(t){for(var e=0;this.length>e;++e)t(new i([this[e]],this.selector),e);return this},h.forEach=function(t){return Array.prototype.forEach.call(this,t),this},h.map=function(t){return Array.prototype.map.call(this,t)},h.select=function(){for(var t=0;this.length>t;++t){var e=this[t];e.select()}return this},h.filter=function(t){var e=Array.prototype.filter.call(this,function(e){return t(new i([e],this.selector))});return new i(e,this.selector)},h.value=function(t){var e=this[0];return t?(e.value=t,this):e.value},h.offset=function(){var t=this[0],e=0,n=0;if(t.offsetParent)do e+=t.offsetLeft,n+=t.offsetTop;while(t=t.offsetParent);return{left:e,top:n}},h.position=function(){var t=this[0];return{top:t.offsetTop,left:t.offsetLeft}},h.outerHeight=function(){return this[0].offsetHeight},h.innerHeight=function(){return this[0].clientHeight},h.contentHeight=function(){var t=window.getComputedStyle(this[0],null),e=t.getPropertyValue("padding-top").replace("px","")-0,n=t.getPropertyValue("padding-bottom").replace("px","")-0;return this.innerHeight()-e-n},h.scrollHeight=function(){return this[0].scrollHeight},h.outerWidth=function(){return this[0].offsetWidth},h.innerWidth=function(){return this[0].clientWidth},h.contentWidth=function(){var t=window.getComputedStyle(this[0],null),e=t.getPropertyValue("padding-left").replace("px","")-0,n=t.getPropertyValue("padding-right").replace("px","")-0;return this.innerWidth()-e-n},h.scrollWidth=function(){return this[0].scrollWidth},h.addClass=function(t){for(var e,n=0;this.length>n;++n)e=this[n],e._classes=e._classes||s(e),e._classes.add(t);return this},h.removeClass=function(t){for(var e,n=0;this.length>n;++n)e=this[n],e._classes=e._classes||s(e),e._classes.remove(t);return this},h.toggleClass=function(t){for(var e,n=0;this.length>n;++n)e=this[n],e._classes=e._classes||s(e),e._classes.toggle(t);return this},h.hasClass=function(t){for(var e,n=0;this.length>n;++n)if(e=this[n],e._classes=e._classes||s(e),e._classes.has(t))return!0;return!1},h.css=function(t,e){if(t instanceof Object)for(var n in t)this.setStyle(n,t[n]);return 2==arguments.length?this.setStyle(t,e):this.getStyle(t)},h.setStyle=function(t,e){for(var n=0;this.length>n;++n)this[n].style[t]=e;return this},h.getStyle=function(t){var e=this[0];return e?e.style[t]:void 0},h.find=function(t){return r(t,this)},h.next=function(){for(var t=[],e=0;this.length>e;++e){var n=this[e].nextElementSibling;n&&t.push(n)}return new i(t)},h.prev=function(){for(var t=[],e=0;this.length>e;++e){var n=this[e].previousElementSibling;n&&t.push(n)}return new i(t)},h.emit=function(t,e){return l.emit(this[0],t,e),this},h.parent=function(){for(var t=[],e=0;this.length>e;++e)t.push(this[e].parentNode);return new i(t)},h.prepend=function(t){for(var e=0;this.length>e;++e)u.prepend(this[e],r(t));return this},h.append=function(t){for(var e=0;this.length>e;++e)u.append(this[e],r(t));return this},h.before=function(t){for(var e=0;this.length>e;++e)u.before(this[e],r(t));return this},h.after=function(t){for(var e=0;this.length>e;++e)u.after(this[e],r(t));return this},h.remove=function(){for(var t=0;this.length>t;++t)u.remove(this[t])},h.replace=function(t){for(var e=0;this.length>e;++e)u.replace(this[e],r(t));return this},h.empty=function(){for(var t=0;this.length>t;++t)u.empty(this[t]);return this}},{"./lib/classes":3,"./lib/domify":4,"./lib/event":5,"./lib/matches":7,"./lib/mutation":8}],dom:[function(t,e){e.exports=t("Mlv/fm")},{}],3:[function(t,e){function n(t){this.el=t,this.list=t.classList}var r=/\s+/;e.exports=function(t){return new n(t)},n.prototype.add=function(t){if(this.list)return this.list.add(t),this;var e=this.array(),n=e.indexOf(t);return~n||e.push(t),this.el.className=e.join(" "),this},n.prototype.remove=function(t){if(this.list)return this.list.remove(t),this;var e=this.array(),n=e.indexOf(t);return~n&&e.splice(n,1),this.el.className=e.join(" "),this},n.prototype.toggle=function(t){return this.list?(this.list.toggle(t),this):this.has(t)?this.remove(t):this.add(t)},n.prototype.array=function(){var t=this.el.className.split(r);return""===t[0]&&t.pop(),t},n.prototype.has=function(t){return this.list?this.list.contains(t):!!~this.array().indexOf(t)}},{}],4:[function(t,e){var n={option:[1,'<select multiple="multiple">',"</select>"],optgroup:[1,'<select multiple="multiple">',"</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tbody:[1,"<table>","</table>"],tfoot:[1,"<table>","</table>"],colgroup:[1,"<table>","</table>"],caption:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],th:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:[0,"",""]};e.exports=function(t){if("string"!=typeof t)throw new TypeError("String expected");var e=/<([\w:]+)/.exec(t);if(!e)throw Error("No elements were generated.");var r=e[1];if("body"==r){var i=document.createElement("html");return i.innerHTML=t,[i.removeChild(i.lastChild)]}var o=n[r]||n._default,s=o[0],a=o[1],l=o[2],i=document.createElement("div");for(i.innerHTML=a+t+l;s--;)i=i.lastChild;var u=[],h=i.firstChild;do u.push(h);while(h=h.nextElementSibling);for(var c=0;u.length>c;++c)i.removeChild(u[c]);return u}},{}],5:[function(t,e,n){n.bind=function(t,e,n,r){return t.addEventListener?t.addEventListener(e,n,r||!1):t.attachEvent("on"+e,n),n},n.unbind=function(t,e,n,r){return t.removeEventListener?t.removeEventListener(e,n,r||!1):t.detachEvent("on"+e,n),n},n.emit=function(t,e,n){n=n||{};var i=o(e),s=document.createEvent(i+"s"),a="function"==typeof s["init"+i]?"init"+i:"initEvent",l=r[a],u=[],h={};n.type=e;for(var c=0;l.length>c;++c){var f=l[c],d=n[f];void 0===d&&(d=s[f]),u.push(d)}s[a].apply(s,u);for(var f in n)h[f]||(s[f]=n[f]);return t.dispatchEvent(s)};var r=t("./init.json"),i=t("./types.json"),o=function(){var t={};for(var e in i)for(var n=i[e],r=0;n.length>r;r++)t[n[r]]=e;return function(e){return t[e]||"Event"}}()},{"./init.json":6,"./types.json":9}],6:[function(t,e){e.exports={initEvent:["type","bubbles","cancelable"],initUIEvent:["type","bubbles","cancelable","view","detail"],initMouseEvent:["type","bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget"],initMutationEvent:["type","bubbles","cancelable","relatedNode","prevValue","newValue","attrName","attrChange"],initKeyEvent:["type","bubbles","cancelable","view","ctrlKey","altKey","shiftKey","metaKey","keyCode","charCode"]}},{}],7:[function(t,e){var n=Element.prototype,r=n.matchesSelector||n.webkitMatchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector;e.exports=function(t,e){if(r)return r.call(t,e);for(var n=t.parentNode.querySelectorAll(e),i=0;n.length>i;++i)if(n[i]==t)return!0;return!1}},{}],8:[function(t,e){function n(t){for(var e=document.createDocumentFragment(),n=0;t.length>n;++n)e.appendChild(t[n]);return e}e.exports.remove=function(t){return t.parentNode?t.parentNode.removeChild(t):void 0},e.exports.replace=function(t,e){return t.parentNode?t.parentNode.replaceChild(n(e),t):void 0},e.exports.prepend=function(t,e){return t.insertBefore(n(e),t.firstChild)},e.exports.append=function(t,e){return document.createDocumentFragment(),t.appendChild(n(e))},e.exports.after=function(t,e){return t.parentNode?t.nextSilbling?t.parentNode.insertBefore(n(e),t.nextSilbling):t.parentNode.appendChild(n(e)):void 0},e.exports.before=function(t,e){return t.parentNode?t.parentNode.insertBefore(n(e),t):void 0},e.exports.empty=function(t){t.innerHTML=""}},{}],9:[function(t,e){e.exports={MouseEvent:["click","mousedown","mouseup","mouseover","mousemove","mouseout"],KeyEvent:["keydown","keyup","keypress"],MutationEvent:["DOMSubtreeModified","DOMNodeInserted","DOMNodeRemoved","DOMNodeRemovedFromDocument","DOMNodeInsertedIntoDocument","DOMAttrModified","DOMCharacterDataModified"],HTMLEvent:["load","unload","abort","error","select","change","submit","reset","focus","blur","resize","scroll"],UIEvent:["DOMFocusIn","DOMFocusOut","DOMActivate"]}},{}]},{},[]);var dom=require("dom"),bodyContent='<div class="container"><span class="title">Click the sentence below</span><br><span class="msg">Hello classy</span></div>',content=dom(bodyContent)[0];document.body.appendChild(content),dom(".container .msg").on("click",function(){alert("Congratulations! Thanks for clicking")});

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

view on requirebin