Merge pull request #1221 from evverx/direct-delegate

Delegate events to #todo-list instead of document

examples/vanillajs/js/helpers.js

@@ -15,36 +15,24 @@
 		target.addEventListener(type, callback, !!useCapture);
 	};
 
-	// Register events on elements that may or may not exist yet:
-	// $live('div a', 'click', function (event) {});
-	window.$live = (function () {
-		var eventRegistry = {};
-
+	// Attach a handler to event for all elements that match the selector,
+	// now or in the future, based on a root element
+	window.$delegate = function (target, selector, type, handler) {
 		function dispatchEvent(event) {
 			var targetElement = event.target;
+			var potentialElements = window.qsa(selector, target);
+			var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
 
-			eventRegistry[event.type].forEach(function (entry) {
-				var potentialElements = window.qsa(entry.selector);
-				var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
-
-				if (hasMatch) {
-					entry.handler.call(targetElement, event);
-				}
-			});
+			if (hasMatch) {
+				handler.call(targetElement, event);
+			}
 		}
 
-		return function (selector, event, handler) {
-			if (!eventRegistry[event]) {
-				eventRegistry[event] = [];
-				window.$on(document.documentElement, event, dispatchEvent, true);
-			}
+		// https://developer.mozilla.org/en-US/docs/Web/Events/blur
+		var useCapture = type === 'blur' || type === 'focus';
 
-			eventRegistry[event].push({
-				selector: selector,
-				handler: handler
-			});
-		};
-	}());
+		window.$on(target, type, dispatchEvent, useCapture);
+	};
 
 	// Find the element's parent with the given tag name:
 	// $parent(qs('a'), 'div');

examples/vanillajs/js/view.js

-/*global qs, qsa, $on, $parent, $live */
+/*global qs, qsa, $on, $parent, $delegate */
 
 (function (window) {
     'use strict';
@@ -140,7 +140,7 @@
 
     View.prototype._bindItemEditDone = function (handler) {
         var that = this;
-        $live('#todo-list li .edit', 'blur', function () {
+        $delegate(that.$todoList, 'li .edit', 'blur', function () {
             if (!this.dataset.iscanceled) {
                 handler({
                     id: that._itemId(this),
@@ -149,7 +149,7 @@
             }
         });
 
-        $live('#todo-list li .edit', 'keypress', function (event) {
+        $delegate(that.$todoList, 'li .edit', 'keypress', function (event) {
             if (event.keyCode === that.ENTER_KEY) {
                 // Remove the cursor from the input when you hit enter just like if it
                 // were a real form
@@ -160,7 +160,7 @@
 
     View.prototype._bindItemEditCancel = function (handler) {
         var that = this;
-        $live('#todo-list li .edit', 'keyup', function (event) {
+        $delegate(that.$todoList, 'li .edit', 'keyup', function (event) {
             if (event.keyCode === that.ESCAPE_KEY) {
                 this.dataset.iscanceled = true;
                 this.blur();
@@ -188,17 +188,17 @@
             });
 
         } else if (event === 'itemEdit') {
-            $live('#todo-list li label', 'dblclick', function () {
+            $delegate(that.$todoList, 'li label', 'dblclick', function () {
                 handler({id: that._itemId(this)});
             });
 
         } else if (event === 'itemRemove') {
-            $live('#todo-list .destroy', 'click', function () {
+            $delegate(that.$todoList, '.destroy', 'click', function () {
                 handler({id: that._itemId(this)});
             });
 
         } else if (event === 'itemToggle') {
-            $live('#todo-list .toggle', 'click', function () {
+            $delegate(that.$todoList, '.toggle', 'click', function () {
                 handler({
                     id: that._itemId(this),
                     completed: this.checked