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！