From dbbdb0664a5f8b99a057c4ffdeaeaed0b9925107 Mon Sep 17 00:00:00 2001
From: Isiah Meadows <me@isiahmeadows.com>
Date: Fri, 25 Aug 2017 05:19:30 -0400
Subject: [PATCH] Reduce memory allocation/usage across multiple event handlers

- `handleEvent` is a very useful tool.
- Always use `addEventListener`/`removeEventListener`, since it's
  required for this optimization.
- Change log updated.
- Drive-by: make DOM mock work with both event listener types.
- Drive-by: eliminate possibility of `Object.prototype` interference.
---
 docs/change-log.md    |  3 +++
 render/render.js      | 40 ++++++++++++++++++++++++----------------
 test-utils/domMock.js |  4 +++-
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/docs/change-log.md b/docs/change-log.md
index 82686f0e..01b4810c 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -28,6 +28,9 @@
 - API: `m.route.set()` causes all mount points to be redrawn ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
 - API: If a user sets the Content-Type header within a request's options, that value will be the entire header value rather than being appended to the default value ([#1924](https://github.com/MithrilJS/mithril.js/pull/1924))
 - API: Using style objects in hyperscript calls will now properly diff style properties from one render to another as opposed to re-writing all element style properties every render.
+- core: `addEventListener` and `removeEventListener` are always used to manage event subscriptions, preventing external interference.
+- core: Event listeners allocate less memory, swap at low cost, and are properly diffed now when rendered via `m.mount()`/`m.redraw()`.
+- core: `Object.prototype` properties can no longer interfere with event listener calls.
 
 ---
 
diff --git a/render/render.js b/render/render.js
index f6782297..bcecf29a 100644
--- a/render/render.js
+++ b/render/render.js
@@ -575,24 +575,32 @@ module.exports = function($window) {
 		}
 	}
 
+	// Here's an explanation of how this works:
+	// 1. The event names are always (by design) prefixed by `on`.
+	// 2. The EventListener interface accepts either a function or an object
+	//    with a `handleEvent` method.
+	// 3. The object does not inherit from `Object.prototype`, to avoid
+	//    any potential interference with that (e.g. setters).
+	// 4. The event name is remapped to the handler before calling it.
+	// 5. In function-based event handlers, `ev.target === this`. We replicate
+	//    that below.
+	function EventDict() {}
+	EventDict.prototype = Object.create(null)
+	EventDict.prototype.handleEvent = function (ev) {
+		this["on" + ev.type].call(ev.target, ev)
+		if (typeof onevent === "function") onevent.call(ev.target, ev)
+	}
+
 	//event
 	function updateEvent(vnode, key, value) {
-		var element = vnode.dom
-		var callback = typeof onevent !== "function" ? value : function(e) {
-			var result = value.call(element, e)
-			onevent.call(element, e)
-			return result
-		}
-		if (key in element) element[key] = typeof value === "function" ? callback : null
-		else {
-			var eventName = key.slice(2)
-			if (vnode.events === undefined) vnode.events = {}
-			if (vnode.events[key] === callback) return
-			if (vnode.events[key] != null) element.removeEventListener(eventName, vnode.events[key], false)
-			if (typeof value === "function") {
-				vnode.events[key] = callback
-				element.addEventListener(eventName, vnode.events[key], false)
-			}
+		if (typeof value === "function") {
+			if (vnode.events == null) vnode.events = new EventDict()
+			if (vnode.events[key] === value) return
+			if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false)
+			vnode.events[key] = value
+		} else if (vnode.events != null) {
+			if (vnode.events[key] != null) vnode.dom.removeEventListener(key.slice(2), vnode.events, false)
+			delete vnode.events[key]
 		}
 	}
 
diff --git a/test-utils/domMock.js b/test-utils/domMock.js
index 060ba4f7..d99dce47 100644
--- a/test-utils/domMock.js
+++ b/test-utils/domMock.js
@@ -278,7 +278,9 @@ module.exports = function(options) {
 						e.target = this
 						if (events[e.type] != null) {
 							for (var i = 0; i < events[e.type].length; i++) {
-								events[e.type][i].call(this, e)
+								var handler = events[e.type][i]
+								if (typeof handler === "function") handler.call(this, e)
+								else handler.handleEvent(e)
 							}
 						}
 						e.preventDefault = function() {