jQuery緩存系統的前世今生!

1 第一代事件系統

   Eean wdwrad 大神的addEvent.js.當然最原始的jQuery事件系統也是照抄過來的.

function addEvent(element, type, handler) {
	// assign each event handler a unique ID
	if (!handler.$$guid) handler.$$guid = addEvent.guid++;
	// create a hash table of event types for the element
	if (!element.events) element.events = {};
	// create a hash table of event handlers for each element/event pair
	var handlers = element.events[type];
	if (!handlers) {
		handlers = element.events[type] = {};
		// store the existing event handler (if there is one)
		if (element["on" + type]) {
			handlers[0] = element["on" + type];
		}
	}
	// store the event handler in the hash table
	handlers[handler.$$guid] = handler;
	// assign a global event handler to do all the work
	element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
	// delete the event handler from the hash table
	if (element.events && element.events[type]) {
		delete element.events[type][handler.$$guid];
	}
};

function handleEvent(event) {
	// grab the event object (IE uses a global event object)
	event = event || window.event;
	// get a reference to the hash table of event handlers
	var handlers = this.events[event.type];
	// execute each event handler
	for (var i in handlers) {
		this.$$handleEvent = handlers[i];
		this.$$handleEvent(event);
	}
};

當然，這由於是最初的版本，自然還沒有引入緩存系統。由於是將回調事件handler直接綁定在元素上，可能引發循環引用，導致內存泄漏。

也有在iframe中事件對象不對的問題。

在ED大神的博客的第54條回覆中，直接引發了jquery的緩存機制的產生，建議給元素分配一個UUID,所有的回調都放到一個對象中去存儲。

看到司徒大神的一段對於oninput事件的處理：

if (W3C) { //先執行W3C
          element.addEventListener("input", updateVModel)
          data.rollback = function() {
            element.removeEventListener("input", updateVModel)
          }
        } else {
          removeFn = function(e) {
            if (e.propertyName === "value") {
              updateVModel()
            }
          }
          element.attachEvent("onpropertychange", removeFn)
          data.rollback = function() {
            element.detachEvent("onpropertychange", removeFn)
          }
        }

        if (DOC.documentMode === 9) { // IE9 無法在切剪中同步VM
          var selectionchange = function(e) {
            if (e.type === "focus") {
              DOC.addEventListener("selectionchange", updateVModel)
            } else {
              DOC.removeEventListener("selectionchange", updateVModel)
            }
          }
          element.addEventListener("focus", selectionchange)
          element.addEventListener("blur", selectionchange)
          var rollback = data.rollback
          data.rollback = function() {
            rollback()
            element.removeEventListener("focus", selectionchange)
            element.removeEventListener("blur", selectionchange)
          }
        }
      }

想了很久，不知道此處的data何用，現在看到，不過是用來做數據緩存的，用來保存元素對象的rollback回調，而不用去直接綁定在元素自身。

防止循環引用的產生。