Close GH-862: Vanilla js improvements.

vanilla-examples/vanillajs/index.html

@@ -20,7 +20,7 @@
 				<span id="todo-count"></span>
 				<ul id="filters">
 					<li>
-						<a href="#/">All</a>
+						<a href="#/" class="selected">All</a>
 					</li>
 					<li>
 						<a href="#/active">Active</a>

vanilla-examples/vanillajs/js/helpers.js

@@ -2,9 +2,13 @@
 (function (window) {
 	'use strict';
 
-	// Cache the querySelector/All for easier and faster reuse
-	window.$ = document.querySelectorAll.bind(document);
-	window.$$ = document.querySelector.bind(document);
+	// Get element(s) by CSS selector:
+	window.qs = function (selector, scope) {
+		return (scope || document).querySelector(selector);
+	};
+	window.qsa = function (selector, scope) {
+		return (scope || document).querySelectorAll(selector);
+	};
 
 	// Register events on elements that may or may not exist yet:
 	// $live('div a', 'click', function (event) {});
@@ -15,11 +19,11 @@
 			var targetElement = event.target;
 
 			eventRegistry[event.type].forEach(function (entry) {
-				var potentialElements = document.querySelectorAll(entry.selector);
+				var potentialElements = window.qsa(entry.selector);
 				var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
 
 				if (hasMatch) {
-					entry.handler(event);
+					entry.handler.call(targetElement, event);
 				}
 			});
 		}
@@ -38,7 +42,7 @@
 	}());
 
 	// Find the element's parent with the given tag name:
-	// $parent($$('a'), 'div');
+	// $parent(qs('a'), 'div');
 	window.$parent = function (element, tagName) {
 		if (!element.parentNode) {
 			return;
@@ -50,6 +54,6 @@
 	};
 
 	// Allow for looping on nodes by chaining:
-	// $('.foo').forEach(function () {})
+	// qsa('.foo').forEach(function () {})
 	NodeList.prototype.forEach = Array.prototype.forEach;
 })(window);