bryanforbes/helper.js

## helper.js
(function(global){
	var NON_HOST_TYPES = { "boolean": 1, "number": 1, "string": 1, "undefined": 1 },
		_listen, _stopListening, normalizeEventName;

	// Imported from http://github.com/phiggins42/has.js.
    // Host objects can return type values that are different from their actual
    // data type. The objects we are concerned with usually return non-primitive
    // types of object, function, or unknown.
    function isHostType(object, property){
        var type = typeof object[property];
        return type == 'object' ? !!object[property] : !NON_HOST_TYPES[type];
    }

	if(isHostType(document, "addEventListener")){
		_listen = function _listen(obj, evt, handler){
			obj.addEventListener(evt, handler, false);
		};
		_stopListening = function _stopListening(obj, evt, handler){
			obj.removeEventListener(evt, handler, false);
		};
		normalizeEventName = function normalizeEventName(/*String*/ name){
			// Generally, name should be lower case, unless it is special
			// somehow (e.g. a Mozilla DOM event).
			// Remove 'on'.
			return name.slice(0,2) =="on" ? name.slice(2) : name;
		};
	}else if(isHostType(document, "attachEvent")){
		_listen = function _listen(obj, evt, handler){
			obj.attachEvent(evt, handler);
		};
		_stopListening = function _stopListening(obj, evt, handler){
			obj.detachEvent(evt, handler);
		};
		normalizeEventName = function normalizeEventName(/*String*/ eventName){
			// Generally, eventName should be lower case, unless it is
			// special somehow (e.g. a Mozilla event)
			// ensure 'on'
			return eventName.slice(0,2) != "on" ? "on" + eventName : eventName;
		};
	}

	global.isHostType = isHostType;
	global._listen = _listen;
	global._stopListening = _stopListening;
	global.normalizeEventName = normalizeEventName;
})(this);

## leak.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="2;url=">
	<title>Leak Example</title>
	<script src="helper.js"></script>
	<script>
		function listen(node, evt, handler){
			_listen(node, normalizeEventName(evt), handler);
		}
		function stopListening(node, evt, handler){
			_stopListening(node, normalizeEventName(evt), handler);
		}
	</script>
</head>
<body>
	<div id="container"></div>
	<script>
		(function(){
			var i =-1, l = 1000, container = document.getElementById("container");
			while (++i < l){
				var e = document.createElement("div");
				(function(elem){
					function LeakFunc(){
						elem.innerHTML = "foo";
					}
					listen(elem, "onclick", LeakFunc);
					container.appendChild(elem);
				})(e);
			}
			container.innerHTML = "";
		})();
	</script>
</body>
</html>

## no_leak_1.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="2;url=">
	<title>Leak Fix with Lookup Wrapper</title>
	<script src="helper.js"></script>
	<script>
		var _cache = {};
		var createWrapper = (function(){
			var id = 0;
			function createLookupHandler(id){
				return function(){
					if(id in _cache && _cache[id]){
						_cache[id].apply(this, arguments);
					}
				};
			}
			function createWrapper(elem, func){
				var cid = id++,
					wrapper = createLookupHandler(cid);
				_cache[cid] = {
					handler: wrapper,
					element: elem
				};
				return wrapper;
			}

			return createWrapper;
		})();
		function listen(node, evt, handler){
			var wrapper = createWrapper(node, handler);

			_listen(node, normalizeEventName(evt), wrapper);

			return wrapper;
		}
		function stopListening(node, evt, handler){
			_stopListening(node, evt, handler);
		}
	</script>
</head>
<body>
	<div id="container"></div>
	<script>
		(function(){
			var i =-1, l = 1000, container = document.getElementById("container");
			while (++i < l){
				var e = document.createElement("div");
				(function(elem){
					function LeakFunc(){
						elem.innerHTML = "foo";
					}
					listen(elem, "onclick", LeakFunc);
					container.appendChild(elem);
				})(e);
			}
			container.innerHTML = "";
		})();
	</script>
</html>
	(function(global){
	var NON_HOST_TYPES = { "boolean": 1, "number": 1, "string": 1, "undefined": 1 },
	_listen, _stopListening, normalizeEventName;

	// Imported from http://github.com/phiggins42/has.js.
	// Host objects can return type values that are different from their actual
	// data type. The objects we are concerned with usually return non-primitive
	// types of object, function, or unknown.
	function isHostType(object, property){
	var type = typeof object[property];
	return type == 'object' ? !!object[property] : !NON_HOST_TYPES[type];
	}

	if(isHostType(document, "addEventListener")){
	_listen = function _listen(obj, evt, handler){
	obj.addEventListener(evt, handler, false);
	};
	_stopListening = function _stopListening(obj, evt, handler){
	obj.removeEventListener(evt, handler, false);
	};
	normalizeEventName = function normalizeEventName(/String/ name){
	// Generally, name should be lower case, unless it is special
	// somehow (e.g. a Mozilla DOM event).
	// Remove 'on'.
	return name.slice(0,2) =="on" ? name.slice(2) : name;
	};
	}else if(isHostType(document, "attachEvent")){
	_listen = function _listen(obj, evt, handler){
	obj.attachEvent(evt, handler);
	};
	_stopListening = function _stopListening(obj, evt, handler){
	obj.detachEvent(evt, handler);
	};
	normalizeEventName = function normalizeEventName(/String/ eventName){
	// Generally, eventName should be lower case, unless it is
	// special somehow (e.g. a Mozilla event)
	// ensure 'on'
	return eventName.slice(0,2) != "on" ? "on" + eventName : eventName;
	};
	}

	global.isHostType = isHostType;
	global._listen = _listen;
	global._stopListening = _stopListening;
	global.normalizeEventName = normalizeEventName;
	})(this);
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="2;url=">
	<title>Leak Example</title>
	<script src="helper.js"></script>
	<script>
	function listen(node, evt, handler){
	_listen(node, normalizeEventName(evt), handler);
	}
	function stopListening(node, evt, handler){
	_stopListening(node, normalizeEventName(evt), handler);
	}
	</script>
	</head>
	<body>
	<div id="container"></div>
	<script>
	(function(){
	var i =-1, l = 1000, container = document.getElementById("container");
	while (++i < l){
	var e = document.createElement("div");
	(function(elem){
	function LeakFunc(){
	elem.innerHTML = "foo";
	}
	listen(elem, "onclick", LeakFunc);
	container.appendChild(elem);
	})(e);
	}
	container.innerHTML = "";
	})();
	</script>
	</body>
	</html>