事件处理和内存释放

请大家看一下这个例子：

<div id="myDiv1" style="border:solid 1px;width:100px;display:inline;">test1</div>&nbsp;
<button onclick="t1.deleteClick1()">删除test1事件</button><br/><br/>

<div id="myDiv2" style="border:solid 1px;width:100px;display:inline;">test2</div>&nbsp;
<button onclick="t2.deleteClick1()">删除test2事件</button><br/><br/>

<script>
Function.prototype.bindAsEventListener = function(object) {
  var __method = this;
  return function(event) {
    __method.call(object, event || window.event);
  }
}

function addEvent (ele, eType, fn, useCapture) {
	if (ele.addEventListener) {
	   ele.addEventListener(eType, fn, useCapture);
	   return true;
	}else if (ele.attachEvent) {
	   return ele.attachEvent('on' + eType, fn);
	}else {
	    ele['on' + eType] = fn;
	}
}

function deleteEvent (ele, eType, fn, useCapture) {
	if (ele.removeEventListener){
	    ele.removeEventListener(fn, fn, false);
	}else if (c.detachEvent){
	    ele.detachEvent(fn, fn);
	}
}

function Test(objid, addType){
	this.name = 'katelin';
	this.obj = document.getElementById(objid);
	if(addType == 1){
	   this.addClick1();	
	}else{
	    //用bindAsEventListener,在事件触发的时候,能够取到Test对象的属性值,this.name
	    addEvent(this.obj, 'click', this.doClick.bindAsEventListener(this));
	}
}

Test.prototype.doClick = function(){
	alert('add click event to div: \n' + this.name);
}

Test.prototype.addClick1 = function(){
	var c = this.obj;
	//这样加事件,在执行doClick的时候,doClick里的this就不是这个对象了
	if (c.addEventListener){
	   c.addEventListener("click", this.doClick, false);
	}else if (c.attachEvent){
	   c.attachEvent("onclick", this.doClick);
	}else{
	   c.onclick = this.doClick;
	}
}

Test.prototype.deleteClick1 = function(){
	var c = this.obj;
	if (c.removeEventListener){
	   c.removeEventListener("click", this.doClick, false);
	}else if (c.detachEvent){
	   c.detachEvent("onclick", this.doClick);
	}
}

var t1 = new Test('myDiv1');
var t2 = new Test('myDiv2', 1);
</script>

我通过Javascript对象来为div增加onclick事件。我用两种方式来增加事件：

第一种通过addClick1，但是这样添加事件，在单击div的时候，处理div单击事件的方法 doClick 没有办法取到javascript对象的属性值，所以打出来的this.name是空。

第二种通过addEvent(this.obj, 'click', this.doClick.bindAsEventListener(this)); 因为用了bindAsEventListener(this),在doClick方法里调用到的this就是当前的这个javascript对象，所以打出来的this.name不为空。

我现在想问一下，用第二种方法在事件处理的方法里虽然可以取到javascript对象了，但是如果我要去事件移掉，要怎么移掉？第一种方法是可以移掉的。

另外，页面上写很多的脚本，每次刷新的时候，内存有增无减。应该怎么写内存释放的方法？同时这种方法要在什么时刻运行比较好？是onunload还是onbeforeunload？

评论

9 楼 zkj_beyond 2007-01-21  

http://www.railscn.com/viewtopic.php?t=93&sid=50a85aa8fa0379d4a601d89e247caa74

/* prevent memory leaks in IE */
/**
* 页面onload 的时候取消所有事件注册，避免ie内存泄漏的bug
*/
Event.observe(window, 'unload', Event.unloadCache, false);

8 楼 katelin 2007-01-21  

我中午找了一下，没找到啊。

另：是姐姐。

7 楼 jianfeng008cn 2007-01-21  

katelin 写道

zkj_beyond 回答一下啊。谢谢。

帅哥 javaeye<<论坛提问的智慧>>需要读读哦 人家已经提示到这份上了,没看过跑去看看也很方便的嘛

6 楼 katelin 2007-01-21  

zkj_beyond 回答一下啊。谢谢。

5 楼 ronghao 2007-01-19  

试了一下，没有找到移除的方法。原因不明，会是因为闭包？？

4 楼 ronghao 2007-01-19  

c.onclick = this.doClick;
我不在DOM视图对象的事件函数上这样绑定函数，我愿意这样：
c.onclick = doClick;
因为doClick实际执行时的上下文（也就是this）是DOM视图对象，而非javascript对象。

3 楼 netfishx 2007-01-19  

用了addEvent，就再用一个removeEvent嘛

2 楼 katelin 2007-01-19  

嗯。因为其实我没有看prototype的代码（现在时间比较紧）。
因为在开发中遇到事件绑定的问题，偶尔看到这种扩展了Function的bindAsEventListener方法。

^_^能不能直接告诉我怎么移掉？谢谢！

1 楼 zkj_beyond 2007-01-19  

参考了prototype.js的代码，但为什么不参考全呢？:twisted:








在window.unload方法里注销事件方法。