在我的广泛研究中,我已经看到许多处理此问题的变通方法。 (See this SO post for some good links。)我主要担心的是处理IE中使用attachEvent()
时出现的内存泄漏。无论如何,在我的所有研究之后,我发现了这个解决方法:
// written by Dean Edwards, 2005
// with input from Tino Zijdel - crisp@xs4all.nl
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler)
{
if (element.addEventListener)
element.addEventListener(type, handler, false);
else
{
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers)
{
handlers = element.events[type] = {};
if (element['on' + type]) handlers[0] = element['on' + type];
element['on' + type] = handleEvent;
}
handlers[handler.$$guid] = handler;
}
}
addEvent.guid = 1;
function removeEvent(element, type, handler)
{
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.events && element.events[type] && handler.$$guid)
delete element.events[type][handler.$$guid];
}
function handleEvent(event)
{
event = event || fixEvent(window.event);
var returnValue = true;
var handlers = this.events[event.type];
for (var i in handlers)
{
if (!Object.prototype[i])
{
this.$$handler = handlers[i];
if (this.$$handler(event) === false) returnValue = false;
}
}
if (this.$$handler) this.$$handler = null;
return returnValue;
}
function fixEvent(event)
{
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function()
{
this.returnValue = false;
}
fixEvent.stopPropagation = function()
{
this.cancelBubble = true;
}
// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if (!window.addEventListener)
{
document.onreadystatechange = function()
{
if (window.onload && window.onload != handleEvent)
{
addEvent(window, 'load', window.onload);
window.onload = handleEvent;
}
}
}
现在我有几个问题。找到这段代码并不容易,所以我可以假设没有多少人使用这段代码。这让我相信其他人正在使用不同的代码片段并且他们的代码没有任何问题。如果是这种情况,那么我刚发布的这段代码是否过度?
我也担心在我的研究中我发现了大量的解决方法,与此类似:
if (el.addEventListener){
el.addEventListener('click', callback, false);
} else if (el.attachEvent){
el.attachEvent('onclick', callback);
}
这段代码不能处理IE引起的内存泄漏。现在问我的问题:使用普通JavaScript处理attachEvent()
的最佳/标准解决方法是什么?IE中的内存泄漏是什么?