|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
|
由于javascript并不是真正意义上“面向对象”的语言，所以，在实现事件驱动模型的时候，总是会遇到一些困难。uRyLinux联盟
当然这里指的事件驱动并不是指javascript固有的事件处理机制或者DOM的事件模型，而是指类似C#或者Java的那种事件模型。uRyLinux联盟
uRyLinux联盟
javascript在处理事件驱动的时候最大的问题在于"this指针"困惑。uRyLinux联盟
例如:<input type="button" onclick=function(){alert(this.value);} value="Hello World!"/>uRyLinux联盟
这里的this指针毫无疑问是没有问题的uRyLinux联盟
但是，<input type="button" id="button1"/>uRyLinux联盟
var objBtn = document.getElementById("button1");uRyLinux联盟
objBtn.attachEvent('onclick', EventHandler);uRyLinux联盟
function EventHandler()uRyLinux联盟
{uRyLinux联盟
alert(this.value);uRyLinux联盟
}uRyLinux联盟
运行这个脚本很吃惊地发现得到的是完全错误的结果uRyLinux联盟
因为这里的this并不是objBtn这个input对象！而是全局的window对象！uRyLinux联盟
类似的问题在javascript中还会经常出现uRyLinux联盟
uRyLinux联盟
再比如一个更复杂的应用：uRyLinux联盟
function mainForm(form)uRyLinux联盟
{uRyLinux联盟
this.form = form;uRyLinux联盟
this.button1 = form.buttonOK;uRyLinux联盟
this.button2 = form.buttonCancel;uRyLinux联盟
this.button1.onclick = Button1_Click; //为按钮注册单击事件uRyLinux联盟
this.button2.onclick = Button2_Click;uRyLinux联盟
mainForm.prototype. Button1_Click = function()uRyLinux联盟
{uRyLinux联盟
alert(this.button1.value);uRyLinux联盟
}uRyLinux联盟
mainForm.prototype.Button2_Click = function()uRyLinux联盟
{uRyLinux联盟
this.form.style.display = 'none';uRyLinux联盟
}uRyLinux联盟
}uRyLinux联盟
uRyLinux联盟
本来一段挺“漂亮”的代码，却不能正确运行，为什么呢？原来问题还是在this上，button1_Clicked和button2_Clicked两个函数虽然是mainForm类的成员函数，但是他们是被this.button1.onclick和this.button2.onclick调用（不完全准确的说法）的，所以函数中的this指得是button1和button2两个对象！这很令人困扰，不是吗？uRyLinux联盟
uRyLinux联盟
为了解决这个问题，必须要保证函数调用者是mainForm对象而不是button或者其他的什么成员，为此，我思考出一种事件注册的机制，将上面的代码写成：uRyLinux联盟
this.button1.ClickEventSender = this;uRyLinux联盟
this.button1.onclick = function(){this.ClickEventSender.Button1_Click(this.ClickEventSender,self.event);}uRyLinux联盟
mainForm.prototype.Button1_Click = function(object, sender)uRyLinux联盟
{uRyLinux联盟
alert(this.button1.value);uRyLinux联盟
}uRyLinux联盟
就得到了正确结果。uRyLinux联盟
uRyLinux联盟
于是，一种完全的基于“后台代码”的“事件驱动”模型慢慢成型，下面是一段简短的Demo代码：uRyLinux联盟
uRyLinux联盟
//后台代码uRyLinux联盟
//事件驱动框架（演示）uRyLinux联盟
//2004-11-16 CreateduRyLinux联盟
//2004-11-17 ModifieduRyLinux联盟
//ControlDemo.jsuRyLinux联盟
function ControlDemo(page)uRyLinux联盟
{uRyLinux联盟
//初始化PageuRyLinux联盟
if (page == null)uRyLinux联盟
{uRyLinux联盟
page = self;uRyLinux联盟
}uRyLinux联盟
if (page != self)uRyLinux联盟
{uRyLinux联盟
//Do sth. here...uRyLinux联盟
}uRyLinux联盟
this.page = page;uRyLinux联盟
uRyLinux联盟
//PropertiesuRyLinux联盟
this.keyPressed = 0;uRyLinux联盟
uRyLinux联盟
//Controlable Entities uRyLinux联盟
//PageBody 注册PageLoad事件uRyLinux联盟
this.body1 = page.document.getElementById("main");uRyLinux联盟
this.page.PageLoadEventSender = this;uRyLinux联盟
this.body1.onload = function(){this.PageLoadEventSender.PageLoad(this.PageLoadEventSender,page.event);}uRyLinux联盟
uRyLinux联盟
//Button1 注册Click事件uRyLinux联盟
this.button1 = page.button1;uRyLinux联盟
this.button1.value = "确定";uRyLinux联盟
this.button1.ClickEventSender = this;uRyLinux联盟
this.button1.onclick = function(){this.ClickEventSender.Button1_Click(this.ClickEventSender,page.event);}uRyLinux联盟
uRyLinux联盟
//Button2 注册Click事件uRyLinux联盟
this.button2 = page.button2;uRyLinux联盟
this.button2.value = "取消";uRyLinux联盟
this.button2.ClickEventSender = this;uRyLinux联盟
this.button2.onclick = function(){this.ClickEventSender.Button2_Click(this.ClickEventSender,page.event);}uRyLinux联盟
uRyLinux联盟
//Textbox1 注册KeyUp、MouseMove事件uRyLinux联盟
this.textbox1 = page.textbox1;uRyLinux联盟
this.textbox1.style.width = "100%";uRyLinux联盟
this.textbox1.rows = 10;uRyLinux联盟
this.textbox1.KeyUpSender = this;uRyLinux联盟
this.textbox1.onkeyup = function(){this.KeyUpSender.Textbox1_KeyUp(this.KeyUpSender,page.event);}uRyLinux联盟
this.textbox1.MouseMoveSender = this;uRyLinux联盟
this.textbox1.onmousemove = function(){this.MouseMoveSender.Textbox1_MouseMove(this.MouseMoveSender, page.event);}uRyLinux联盟
uRyLinux联盟
//LabelsuRyLinux联盟
this.label1 = page.document.getElementById("label1");uRyLinux联盟
this.label2 = page.document.getElementById("label2");uRyLinux联盟
this.label3 = page.document.getElementById("label3");uRyLinux联盟
uRyLinux联盟
//EventHandlers 事件处理函数uRyLinux联盟
ControlDemo.prototype.PageLoad = function(sender,event)uRyLinux联盟
{uRyLinux联盟
this.page.defaultStatus = "事件驱动框架演示~~";uRyLinux联盟
this.page.resizeTo(600,400);uRyLinux联盟
}uRyLinux联盟
ControlDemo.prototype.Button1_Click = function(sender,event)uRyLinux联盟
{uRyLinux联盟
alert("Hello ^_^");uRyLinux联盟
}uRyLinux联盟
ControlDemo.prototype.Button2_Click = function(sender,event)uRyLinux联盟
{uRyLinux联盟
if (page.opener == null)uRyLinux联盟
{uRyLinux联盟
page.opener = page;uRyLinux联盟
}uRyLinux联盟
page.close();uRyLinux联盟
}uRyLinux联盟
ControlDemo.prototype.Textbox1_KeyUp = function(sender, event)uRyLinux联盟
{uRyLinux联盟
this.keyPressed++;uRyLinux联盟
this.label1.innerText = this.keyPressed;uRyLinux联盟
this.label2.innerText = this.textbox1.value.length;uRyLinux联盟
this.label3.innerText = event.keyCode;uRyLinux联盟
}uRyLinux联盟
ControlDemo.prototype.Textbox1_MouseMove = function(sender, event)uRyLinux联盟
{uRyLinux联盟
this.page.status = "鼠标位置：x="+event.x+" y="+event.y;uRyLinux联盟
}uRyLinux联盟
}uRyLinux联盟
uRyLinux联盟
uRyLinux联盟
<!--前台页面-->uRyLinux联盟
<html>uRyLinux联盟
<head>uRyLinux联盟
<title>事件驱动框架演示</title>uRyLinux联盟
</head>uRyLinux联盟
<body id = "main">uRyLinux联盟
<div align="center" id="div1">uRyLinux联盟
<textarea name="textbox1" id="textbox1"></textarea><br/>uRyLinux联盟
键盘点击次数为<span id="label1">0</span>次，共键入<span id="label2">0</span>个字符，最后输入的字符码为uRyLinux联盟
<span id="label3">0</span>uRyLinux联盟
<br/>uRyLinux联盟
<input type="button" name="button1" id="button1"></input>uRyLinux联盟
<input type="button" name="button2" id="button2"></input>uRyLinux联盟
</div>uRyLinux联盟
</body>uRyLinux联盟
</html>uRyLinux联盟
<script language="javascript" type="text/javascript" src="ControlDemo.js"></script>uRyLinux联盟
<script language="javascript" type="text/javascript">uRyLinux联盟
var demo = new ControlDemo();uRyLinux联盟
</script>uRyLinux联盟
uRyLinux联盟
是不是感觉页面上的代码很简洁？uRyLinux联盟
几乎只是放置对象和构造类，其他什么也不做。uRyLinux联盟
而编写后台代码是不是让用asp.net的朋友有一种“似曾相识”的感觉？uRyLinux联盟
虽然不敢说一定好，但，这就是javascript的另类力量。^^
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
