请大家看一下这个例子:
[code]<div id="myDiv1" style="border:solid 1px;width:100px;display:inline;">test1</div>
<button onclick="t1.deleteClick1()">删除test1事件</button><br/><br/>
<div id="myDiv2" style="border:solid 1px;width:100px;display:inline;">test2</div>
<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>[/code]
我通过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?
[code]<div id="myDiv1" style="border:solid 1px;width:100px;display:inline;">test1</div>
<button onclick="t1.deleteClick1()">删除test1事件</button><br/><br/>
<div id="myDiv2" style="border:solid 1px;width:100px;display:inline;">test2</div>
<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>[/code]
我通过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?