另一个版本的addEvent与removeEvent

主要是在内存泄漏上的改进

(function() {
	window.EventUtils = {
		eventFuncs : [],

		addEvent : function(o, n, f) {
			var el, id;

			// Resolve element by id if needed
			o = typeof(o) == 'string' ? document.getElementById(o) : o;

			if (o.attachEvent) {
				// Since we can't use attachEvent we need to generate an unique id for the object
				// and place functions in an array one for each object
				el = EventUtils.eventFuncs;
				id = o._evtID;

				if (!el[id]) {
					// Generate new unique id
					id = o._evtID = el.length;

					// Add event listener old fashion way instead of attachEvent
					o['on' + n] = function() {
						var i, l, e = window.event, li;

						e.target = e.srcElement; // Force W3C style

						// Execute each event listener in order
						for (i = 0, li = el[e.target._evtID], l = li.length; i < l; i++)
							li[i](e);
					};

					// Create array with first function
					el[id] = [f];
				} else
					el[id].push(f); // Push in more functions

				// Fix the IE leak
				o = null;
			} else if (o.addEventListener)
				o.addEventListener(n, f, false);
			else
				o['on' + n] = f;

			return f;
		},

		removeEvent : function(o, n, f) {
			var i, li;

			// Resolve element by id if needed
			o = typeof(o) == 'string' ? document.getElementById(o) : o;

			if (o.detachEvent) {
				li = EventUtils.eventFuncs[o._evtID];

				if (li) {
					// Detach event listener by looking for it and remove it from the array
					for (i = 0; i < li.length; i++) {
						if (li[i] === f)
							li.splice(i, 1);
					}
				}
			} else if (o.removeEventListener)
				o.removeEventListener(n, f, false);
			else
				o['on' + n] = null;
		}
	};
})();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Example of an simple event class not using the unload event</title> 
<script type="text/javascript"> 
	(function() {
		window.EventUtils = {
			eventFuncs : [],
 
			addEvent : function(o, n, f) {
				var el, id;
 
				// Resolve element by id if needed
				o = typeof(o) == 'string' ? document.getElementById(o) : o;
 
				if (o.attachEvent) {
					// Since we can't use attachEvent we need to generate an unique id for the object
					// and place functions in an array one for each object
					el = EventUtils.eventFuncs;
					id = o._evtID;
 
					if (!el[id]) {
						// Generate new unique id
						id = o._evtID = el.length;
 
						// Add event listener old fashion way instead of attachEvent
						o['on' + n] = function() {
							var i, l, e = window.event, li;
 
							e.target = e.srcElement; // Force W3C style
 
							// Execute each event listener in order
							for (i = 0, li = el[e.target._evtID], l = li.length; i < l; i++)
								li[i](e);
						};
 
						// Create array with first function
						el[id] = [f];
					} else
						el[id].push(f); // Push in more functions
 
					// Fix the IE leak
					o = null;
				} else if (o.addEventListener)
					o.addEventListener(n, f, false);
				else
					o['on' + n] = f;
 
				return f;
			},
 
			removeEvent : function(o, n, f) {
				var i, li;
 
				// Resolve element by id if needed
				o = typeof(o) == 'string' ? document.getElementById(o) : o;
 
				if (o.detachEvent) {
					li = EventUtils.eventFuncs[o._evtID];
 
					if (li) {
						// Detach event listener by looking for it and remove it from the array
						for (i = 0; i < li.length; i++) {
							if (li[i] === f)
								li.splice(i, 1);
						}
					}
				} else if (o.removeEventListener)
					o.removeEventListener(n, f, false);
				else
					o['on' + n] = null;
			}
		};
	})();
 
	function addListeners() {
		var f;
 
		EventUtils.addEvent('elm', 'click', function(e) {
			alert('Listener 1: ' + e.target.id);
		});
 
		f = EventUtils.addEvent('elm', 'click', function(e) {
			alert('Listener 2: ' + e.target.id);
		});
 
		EventUtils.addEvent('elm', 'click', function(e) {
			alert('Listener 3: ' + e.target.id);
		});
 
		EventUtils.removeEvent('elm', 'click', f);
	}
</script> 
</head> 
<body onload="addListeners();"> 
 
<h1>Example of an simple event class not using the unload event</h1> 
 
<div id="elm">Click me and try me in Drip or sIEve!</div> 
 
</body> 
</html>

posted on 2009-12-29 13:34 司徒正美阅读(1267) 评论(5) 收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

另一个版本的addEvent与removeEvent