JavaScript实现自定义事件

作者：Truly
日期：2007.8.3

上篇文章介绍了属性，或者说是闭包，本文讨论它的一个实际应用。

由于将变量封装为方法，这样可以更好的保护私有变量，同时，我们也可以方便的监视它值的变化。

先看如下代码，部分代码来自于《Action in Ajax》

< html >
< head >
     < title > Test5 title >
head >

< body >
< span  id ='test' > Click Me! span >
< input  type =button  onclick ="document.getElementById('test').value = 2"  value ='set' >
< script >
function  Element(value, domEL){
this .domEl  =  domEL;
this .value  =  value;
this .domEl.buttonObj  =   this ;    
this .domEl.onclick = this .clickHandler;
}

Element.prototype.clickHandler = function (){
var  buttonObj  =   this .buttonObj;
alert(buttonObj.value);
}

var  b  =   new  Element( 1 , document.getElementById('test'));
script >

body >
html >

运行这个页面，点击ClickMe的时候返回来我们初始化的值1，而set之后，再次点击，却没有得到期望的值2。

我们使用属性方法来改造上面的代码，得到：

< html >
< head >
     < title > Test6 title >
head >

< body >
< span  id ='test' > Click Me! span >

< input  type =button  onclick ="document.getElementById('test').setValue(2)"  value ='set' >
< script >

function  Element(value, domEL){
this .domEl  =  domEL;                
this .domEl.getValue  =   function () {  return  value; };
this .domEl.setValue  =   function (newValue) { value  =  newValue; };
this .value = value;
this .domEl.buttonObj  =   this ;    
this .domEl.onclick = this .clickHandler;
}

Element.prototype.clickHandler = function (){
var  buttonObj  =   this .buttonObj;    
alert(buttonObj.domEl.getValue());
}

var  b  =   new  Element( 1 , document.getElementById('test'));
script >

body >
html >

打开页面，点击Click Me，然后点击set按钮，再次点击Click Me，这次我们得到了正确的结果，方法的好处就在于此。

有了上面的基础，我们就很方便的实现对DOM元素的onValueChange事件进行监听：

< html >
< head >
     < title > Test7 title >
head >

< body >
< span  id ='test' > Click Me! span >
< input  type =button  onclick ="document.getElementById('test').setValue(2)"  value ='set' >
< script >
function  Element(value, domEL){
this .domEl  =  domEL;            
this .domEl.getValue  =   function () {  return  value; };
this .domEl.setValue  =   function (newValue) {  var  isChange = false   ||  value != newValue; value  =  newValue;  if (isChange  &&   this .onValueChange)  this .onValueChange();  };
this .domEl.buttonObj  =   this ;    
this .domEl.onclick = this .clickHandler;
this .domEl.onValueChange = this .valueChangeHandler;
}

Element.prototype.clickHandler = function (){
var  buttonObj  =   this .buttonObj;    
alert(buttonObj.domEl.getValue());
}
Element.prototype.valueChangeHandler = function (){
var  buttonObj  =   this .buttonObj;
alert('value is changed to ' +  buttonObj.domEl.getValue());
}

var  b  =   new  Element( 1 , document.getElementById('test'));
script >

body >
html >

这样当我们点击set按钮改变dom元素value的时候，则激发其onValueChange事件，并且此方法可以应用到所有的DOM元素上，更加方便实现MVC模式和Obsever模式。

同时通过本文的示例，更加清晰的认识了使用属性或者说闭包方式带给我们的好处。

enjoy code！

转载于:https://www.cnblogs.com/Truly/archive/2007/08/03/842384.html