myEvent.js javascript跨瀏覽器事件架構

event究竟有多麼複雜？可見前輩的6年前的努力：最佳的addEvent是怎樣誕生的，後起之秀jQuery也付出了一千六百多行血汗代碼（v 1.5.1）搞定了6年後出現的各種核的瀏覽器。

我參考前輩的代碼以及自己的理解嘗試寫了一個事件架構，我的架構完成了一個事件機制的核心，它能提供統一介面實現多事件綁定以及避免記憶體流失等其他一些問題，更重要的是效能還不錯。

我的手法：

所有回呼函數根據元素、事件類型、回呼函數唯一ID緩衝在一個_create對象中（其內部具體結構可見下面源碼的關於_cache的注釋）。
事件綁定使用一個_create代理函數處理，並且一個元素的各類型事件全部通過此進行分發，同時運用apply方法讓IE的指標指向元素。
通過數組隊列解決IE回呼函數執行順序的問題。
fix函數將處理回呼函數傳入的event參數以及其他相容問題。此處參考了jQuery.event.fix。
斷開事件與元素的循環參考避免記憶體流失。
一、核心實現：
複製代碼 代碼如下:// myEvent 0.2
// 2011.04.06 - TangBin - planeart.cn - MIT Licensed
/**
* 事件架構
* @namespace
* @see http://www.planeart.cn/?p=1285
*/
var myEvent = (function () {
var _fid = 1,
_guid = 1,
_time = (new Date).getTime(),
_nEid = '{$eid}' + _time,
_nFid = '{$fid}' + _time,
_DOM = document.addEventListener,
_noop = function () {},
_create = function (guid) {
return function (event) {
event = api.fix(event || window.event);
var i = 0,
type = (event || (event = document.event)).type,
elem = _cache[guid].elem,
data = arguments,
events = _cache[guid].events[type];
for (; i < events.length; i ++) {
if (events[i].apply(elem, data) === false) event.preventDefault();
};
};
},
_cache = {/*
1: {
elem: (HTMLElement),
events: {
click: [(Function), (..)],
(..)
},
listener: (Function)
},
(..)
*/};
var api = {
/**
* 事件綁定
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Function} 要綁定的函數
*/
bind: function (elem, type, callback) {
var guid = elem[_nEid] || (elem[_nEid] = _guid ++);
if (!_cache[guid]) _cache[guid] = {
elem: elem,
listener: _create(guid),
events: {}
};
if (type && !_cache[guid].events[type]) {
_cache[guid].events[type] = [];
api.add(elem, type, _cache[guid].listener);
};
if (callback) {
if (!callback[_nFid]) callback[_nFid] = _fid ++;
_cache[guid].events[type].push(callback);
} else
return _cache[guid];
},
/**
* 事件卸載
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Function} 要卸載的函數
*/
unbind: function (elem, type, callback) {
var events, i, list,
guid = elem[_nEid],
handler = _cache[guid];
if (!handler) return;
events = handler.events;
if (callback) {
list = events[type];
if (!list) return;
for (i = 0; i < list.length; i ++) {
list[i][_nFid] === callback[_nFid] && list.splice(i--, 1);
};
if (list.length === 0) return api.unbind(elem, type);
} else if (type) {
delete events[type];
api.remove(elem, type, handler.listener);
} else {
for (i in events) {
api.remove(elem, i, handler.listener);
};
delete _cache[guid];
};
},
/**
* 事件觸發 (注意：不會觸發瀏覽器預設行為與冒泡)
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Array} (可選)附加資料
*/
triggerHandler: function (elem, type, data) {
var guid = elem[_nEid],
event = {
type: type,
target: elem,
currentTarget: elem,
preventDefault: _noop,
stopPropagation: _noop
};
data = data || [];
data.unshift(event);
guid && _cache[guid].listener.apply(elem, data);
try {
elem['on' + type] && elem['on' + type].apply(elem, data);
//elem[type] && elem[type]();
} catch (e) {};
},
// 原生事件綁定介面
add: _DOM ? function (elem, type, listener) {
elem.addEventListener(type, listener, false);
} : function (elem, type, listener) {
elem.attachEvent('on' + type, listener);
},
// 原生事件卸載介面
remove: _DOM ? function (elem, type, listener) {
elem.removeEventListener(type, listener, false);
} : function (elem, type, listener) {
elem.detachEvent('on' + type, listener);
},
// 修正
fix: function (event) {
if (_DOM) return event;
var name,
newEvent = {},
doc = document.documentElement,
body = document.body;
newEvent.target = event.srcElement || document;
newEvent.target.nodeType === 3 && (newEvent.target = newEvent.target.parentNode);
newEvent.preventDefault = function () {event.returnValue = false};
newEvent.stopPropagation = function () {event.cancelBubble = true};
newEvent.pageX = newEvent.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
newEvent.pageY = newEvent.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
newEvent.relatedTarget = event.fromElement === newEvent.target ? event.toElement : event.fromElement;
// !!IE寫event會極其容易導致記憶體流失，Firefox寫event會報錯
// 拷貝event
for (name in event) newEvent[name] = event[name];
return newEvent;
}
};
return api;
})();

我給一萬個元素繫結事件進行了測試，測試載入器為sIEve，結果：

事件架構	耗時	記憶體
IE8
jQuery.bind	1064 MS	79.80 MB
myEvent.bind	623 MS	35.82 MB
IE6
jQuery.bind	2503 MS	74.23 MB
myEvent.bind	1810 MS	28.48 MB

可以看到無論是執行效率還是記憶體佔用myEvent都比有一定優勢，這是可能是由於jQuery事件機制過於強大導致其效能的損耗。
測試樣本：http://www.planeart.cn/demo/myEvent/

二、擴充自訂事件機制
jQuery是可以自訂事件的，它用一個special命名空間儲存自訂事件，我在上面代碼的基礎上模仿jQuery自訂事件機制，並把其著名的ready事件與另外一個jQuery hashchange事件外掛程式移植過來。

這兩個自訂事件非常重要，ready事件可以在DOM就緒給元素繫結事件，比傳統使用window.onload要快很多；hashchange事件可以監聽錨點改變，常用於解決AJAX記錄問題，如Twitter新版本就就採用此處理AJAX，使用錨點機制除了可以提高AJAX應用程式的使用者體驗外，如果按照一定規則還能被google索引到。

當然，我前面文章實現的imgReady事件也可以通過此擴充進來，稍後更新。

複製代碼 代碼如下:// myEvent 0.2.2
// 2011.04.07 - TangBin - planeart.cn - MIT Licensed
/**
* 事件架構
* @namespace
* @see http://www.planeart.cn/?p=1285
*/
var myEvent = (function () {
var _ret, _name,
_fid = 1,
_guid = 1,
_time = (new Date).getTime(),
_nEid = '{$eid}' + _time,
_nFid = '{$fid}' + _time,
_DOM = document.addEventListener,
_noop = function () {},
_create = function (guid) {
return function (event) {
event = myEvent.fix(event || window.event);
var type = (event || (event = document.event)).type,
elem = _cache[guid].elem,
data = arguments,
events = _cache[guid].events[type],
i = 0,
length = events.length;
for (; i < length; i ++) {
if (events[i].apply(elem, data) === false) event.preventDefault();
};
event = elem = null;
};
},
_cache = {/*
1: {
elem: (HTMLElement),
events: {
click: [(Function), (..)],
(..)
},
listener: (Function)
},
(..)
*/};
var API = function () {};
API.prototype = {
/**
* 事件綁定
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Function} 要綁定的函數
*/
bind: function (elem, type, callback) {
var events, listener,
guid = elem[_nEid] || (elem[_nEid] = _guid ++),
special = this.special[type] || {},
cacheData = _cache[guid];
if (!cacheData) cacheData = _cache[guid] = {
elem: elem,
listener: _create(guid),
events: {}
};
events = cacheData.events;
listener = cacheData.listener;
if (!events[type]) events[type] = [];
if (!callback[_nFid]) callback[_nFid] = _fid ++;
if (!special.setup || special.setup.call(elem, listener) === false) {
events[type].length === 0 && this.add(elem, type, listener);
};
events[type].push(callback);
},
/**
* 事件卸載
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Function} 要卸載的函數
*/
unbind: function (elem, type, callback) {
var events, special, i, list, fid,
guid = elem[_nEid],
cacheData = _cache[guid];
if (!cacheData) return;
events = cacheData.events;
if (callback) {
list = events[type];
fid = callback[_nFid];
if (!list) return;
for (i = 0; i < list.length; i ++) {
list[i][_nFid] === fid && list.splice(i--, 1);
};
if (!list.length) this.unbind(elem, type);
} else if (type) {
special = this.special[type] || {};
if (!special.teardown || special.teardown.call(elem) === false) {
this.remove(elem, type, cacheData.listener);
};
delete events[type];
} else {
for (i in events) {
this.remove(elem, i, cacheData.listener);
};
delete _cache[guid];
};
},
/**
* 事件觸發 (注意：不會觸發瀏覽器預設行為與冒泡)
* @param {HTMLElement} 元素
* @param {String} 事件名
* @param {Array} (可選)附加資料
*/
triggerHandler: function (elem, type, data) {
var guid = elem[_nEid],
cacheData = _cache[guid],
event = {
type: type,
target: elem,
currentTarget: elem,
preventDefault: _noop,
stopPropagation: _noop
};
data = data || [];
data.unshift(event);
cacheData && cacheData.events[type] && _cache[guid].listener.apply(elem, data);
try {
elem['on' + type] && elem['on' + type].apply(elem, data);
//elem[type] && elem[type]();
} catch (e) {};
},
// 自訂事件介面
special: {},
// 原生事件綁定介面
add: _DOM ? function (elem, type, listener) {
elem.addEventListener(type, listener, false);
} : function (elem, type, listener) {
elem.attachEvent('on' + type, listener);
},
// 原生事件卸載介面
remove: _DOM ? function (elem, type, listener) {
elem.removeEventListener(type, listener, false);
} : function (elem, type, listener) {
elem.detachEvent('on' + type, listener);
},
// 修正
fix: function (event) {
if (_DOM) return event;
var name,
newEvent = {},
doc = document.documentElement,
body = document.body;
newEvent.target = event.srcElement || document;
newEvent.target.nodeType === 3 && (newEvent.target = newEvent.target.parentNode);
newEvent.preventDefault = function () {event.returnValue = false};
newEvent.stopPropagation = function () {event.cancelBubble = true};
newEvent.pageX = newEvent.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
newEvent.pageY = newEvent.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
newEvent.relatedTarget = event.fromElement === newEvent.target ? event.toElement : event.fromElement;
// !!直接寫event IE導致記憶體流失，Firefox會報錯
// 偽裝event
for (name in event) newEvent[name] = event[name];
return newEvent;
}
};
return new API();
})();
// DOM就緒事件
myEvent.ready = (function () {
var readyList = [], DOMContentLoaded,
readyBound = false, isReady = false;
function ready () {
if (!isReady) {
if (!document.body) return setTimeout(ready, 13);
isReady = true;
if (readyList) {
var fn, i = 0;
while ((fn = readyList[i++])) {
fn.call(document, {});
};
readyList = null;
};
};
};
function bindReady () {
if (readyBound) return;
readyBound = true;
if (document.readyState === 'complete') {
return ready();
};
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
window.addEventListener('load', ready, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', DOMContentLoaded);
window.attachEvent('onload', ready);
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch (e) {};
if (document.documentElement.doScroll && toplevel) {
doScrollCheck();
};
};
};
myEvent.special.ready = {
setup: bindReady,
teardown: function () {}
};
if (document.addEventListener) {
DOMContentLoaded = function () {
document.removeEventListener('DOMContentLoaded', DOMContentLoaded, false);
ready();
};
} else if (document.attachEvent) {
DOMContentLoaded = function () {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', DOMContentLoaded);
ready();
};
};
};
function doScrollCheck () {
if (isReady) return;
try {
document.documentElement.doScroll('left');
} catch (e) {
setTimeout(doScrollCheck, 1);
return;
};
ready();
};
return function (callback) {
bindReady();
if (isReady) {
callback.call(document, {});
} else if (readyList) {
readyList.push(callback);
};
return this;
};
})();
// Hashchange Event v1.3
(function (window, undefined) {
var config = {
delay: 50,
src: null,
domain: null
},
str_hashchange = 'hashchange',
doc = document,
isIE = !-[1,],
fake_onhashchange, special = myEvent.special,
doc_mode = doc.documentMode,
supports_onhashchange = 'on' + str_hashchange in window && (doc_mode === undefined || doc_mode > 7);
function get_fragment(url) {
url = url || location.href;
return '#' + url.replace(/^[^#]*#?(.*)$/, '$1');
};
special[str_hashchange] = {
setup: function () {
if (supports_onhashchange) return false;
myEvent.ready(fake_onhashchange.start);
},
teardown: function () {
if (supports_onhashchange) return false;
myEvent.ready(fake_onhashchange.stop);
}
};
/** @inner */
fake_onhashchange = (function () {
var self = {},
timeout_id, last_hash = get_fragment(),
/** @inner */
fn_retval = function (val) {
return val;
},
history_set = fn_retval,
history_get = fn_retval;
self.start = function () {
timeout_id || poll();
};
self.stop = function () {
timeout_id && clearTimeout(timeout_id);
timeout_id = undefined;
};
function poll() {
var hash = get_fragment(),
history_hash = history_get(last_hash);
if (hash !== last_hash) {
history_set(last_hash = hash, history_hash);
myEvent.triggerHandler(window, str_hashchange);
} else if (history_hash !== last_hash) {
location.href = location.href.replace(/#.*/, '') + history_hash;
};
timeout_id = setTimeout(poll, config.delay);
};
isIE && !supports_onhashchange && (function () {
var iframe,iframe_src, iframe_window;
self.start = function () {
if (!iframe) {
iframe_src = config.src;
iframe_src = iframe_src && iframe_src + get_fragment();
iframe = doc.createElement('<IFRAME title=empty style="DISPLAY: none" tabIndex=-1 src="' + (iframe_src || 'javascript:0') + '"></IFRAME>');
myEvent.bind(iframe, 'load', function () {
myEvent.unbind(iframe, 'load');
iframe_src || history_set(get_fragment());
poll();
});
doc.getElementsByTagName('html')[0].appendChild(iframe);
iframe_window = iframe.contentWindow;
doc.onpropertychange = function () {
try {
if (event.propertyName === 'title') {
iframe_window.document.title = doc.title;
};
} catch (e) {};
};
};
};
self.stop = fn_retval;
/** @inner */
history_get = function () {
return get_fragment(iframe_window.location.href);
};
/** @inner */
history_set = function (hash, history_hash) {
var iframe_doc = iframe_window.document,
domain = config.domain;
if (hash !== history_hash) {
iframe_doc.title = doc.title;
iframe_doc.open();
domain && iframe_doc.write('<SCRIPT>document.domain="' + domain + '"</SCRIPT>');
iframe_doc.close();
iframe_window.location.hash = hash;
};
};
})();
return self;
})();
})(this);

ready事件是偽事件，調用方式：

複製代碼 代碼如下:myEvent.ready(function () {
//[code..]
});

hashchange事件可以採用標準方式綁定： 複製代碼 代碼如下: myEvent.bind(window, 'hashchange', function () {
//[code..]
});

這裡有一些文章值得閱讀：
javascript 跨瀏覽器的事件系統(司徒正美。他部落格有一系列的講解)
更優雅的相容（BELLEVE INVIS）