IE事件注册相关的内存泄露总结

经过一上午的艰苦试验验证，得出如下结论：
1、将元素传入闭包，并在其中注册事件,这是导致内存泄露的根源之一；另一必要条件是：元素必须脱离文档树，亦即类似执行了语句：

elm.parentNode.removeChild(elm)

。
2、解决方式：避免上述情形；在window.onunload中取消事件注册。
示例如下：
1、

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
var global = {};
(function(test){
global.handler=handler;
document.getElementById('test').attachEvent('onclick',handler);
function handler(){};
})(test);//将test传入闭包

window.attachEvent('onunload',function(){
test.detachEvent('onclick',global.handler);//可消除内存泄露
});
function leak(){//执行此句，使test脱离document树.
document.body.removeChild(document.getElementById('test'));
}
//--</script>

以上是dom2的事件注册方式，再来看看dom1的：

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
(function(test){
document.getElementById('test').onclick=hander;
function hander(){};
})(test);//将test传入闭包

window.attachEvent('onunload',function(){
test.onclick=null;//对应dom1
});
function leak(){
document.body.removeChild(document.getElementById('test'));
}
//--</script>

当然，如果你愿意，完全可以把'onclick'换成任意一个你喜欢的属性：

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
(function(test){
function hander(){};
document.getElementById('test').ss=hander;
})(test);

window.attachEvent('onunload',function(){
test.ss=null;//可防止泄露，没有这句定然泄露
});
function leak(){
document.body.removeChild(document.getElementById('test'));
}
//--</script>

如果不把test传入闭包，则不会泄露：

var test=document.getElementById('test');
(function(){
document.getElementById('test').onclick=hander;
function hander(){};
})();//不将test传入闭包

当然，如果这个元素始终在doucument树中，也不会泄露：

function leak(){
//注释了下面这句
//document.body.removeChild(document.getElementById('test'));
}

最后，如果你这么写，当然也不会泄露：

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
function hander(){};
test.onclick=hander;
//--</script>

总结：IE事件模型内存泄露的本质其实就是元素、作用域、事件处理函数之间循环引用。

var test=document.getElementById('test');
(function(test){//作用域A
document.getElementById('test').onclick=hander;
function hander(){
//作用域B
};
})(test);//将test传入闭包
//A引用test，test引用了hander,hander通过作用域B又引用了A，形成了回路。
//由此可以引出如下例子，它也会泄露：
(function(){//作用域A
var test=document.createElement('dl');
test.onclick=hander;
function hander(){
//作用域B
};
})();