javascript
javascript事件驱动框架 收藏
? javascript事件驅動框架 收藏
一個簡單的事件驅動框架的演示：
/*ControlDemo.js*/
//事件驅動框架（演示）
function ControlDemo(page)
{
?//初始化Page
?if (page == null)
?{
? page = self;
?}
?if (page != self)
?{
? //Do sth. here...
?}
?this.page = page;
?//Properties
?this.keyPressed = 0;
?//Controlable Entities
?//PageBody
?this.body1 = page.document.getElementById("main");
?page.PageLoadEventSender = this;
?this.body1.onload = function(){this.PageLoadEventSender.PageLoad(this.PageLoadEventSender,page.event);}
?
?//Button1
?this.button1 = page.button1;
?this.button1.value = "確定";
?this.button1.ClickEventSender = this;
?this.button1.onclick = function(){this.ClickEventSender.Button1_Click(this.ClickEventSender,page.event);}
?//Button2
?this.button2 = page.button2;
?this.button2.value = "取消";
?this.button2.ClickEventSender = this;
?this.button2.onclick = function(){this.ClickEventSender.Button2_Click(this.ClickEventSender,page.event);}
?
?//Textbox1
?this.textbox1 = page.textbox1;
?this.textbox1.style.width = "100%";
?this.textbox1.rows = 10;
?this.textbox1.KeyUpSender = this;
?this.textbox1.onkeyup = function(){this.KeyUpSender.Textbox1_KeyUp(this.KeyUpSender,page.event);}
?this.textbox1.MouseMoveSender = this;
?this.textbox1.onmousemove = function(){this.MouseMoveSender.Textbox1_MouseMove(this.MouseMoveSender, page.event);}
?//Labels
?this.label1 = page.document.getElementById("label1");
?this.label2 = page.document.getElementById("label2");
?this.label3 = page.document.getElementById("label3");
?//EventHandlers
?this.PageLoad = function(sender,event)
?{
? this.page.defaultStatus = "事件驅動框架演示~~";
? this.page.resizeTo(600,400);
?}
?this.Button1_Click = function(sender,event)
?{
? alert("Hello ^_^");
?}
?this.Button2_Click = function(sender,event)
?{
? if (page.opener == null)
? {
?? page.opener = page;
? }
? page.close();
?}
?this.Textbox1_KeyUp = function(sender, event)
?{
? this.keyPressed++;
? this.label1.innerText = this.keyPressed;
? this.label2.innerText = this.textbox1.value.length;
? this.label3.innerText = event.keyCode;
?}
?this.Textbox1_MouseMove = function(sender, event)
?{
? this.page.status = "鼠標位置：x="+event.x+"??? y="+event.y;
?}
}
/*ControlDemo.html*/
<html>
<head>
<title>事件驅動框架演示</title>
</head>
<body id = "main">
<div align="center" id="div1">
?<textarea name="textbox1" id="textbox1"></textarea><br/>
?鍵盤點擊次數為<span id="label1">0</span>次，共鍵入<span id="label2">0</span>個字符，最后輸入的字符碼為
?<span id="label3">0</span>
?<br/>
?<input type="button" name="button1" id="button1"></input>
?<input type="button" name="button2" id="button2"></input>
</div>
</body>
</html>
<script language="javascript" type="text/javascript" src="ControlDemo.js"></script>
<script language="javascript" type="text/javascript">
var demo = new ControlDemo();
</script>
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/yanwl/archive/2004/11/16/183778.aspx
總結
以上是生活随笔為你收集整理的javascript事件驱动框架 收藏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 作者：胡卫生，博士，上海交通大学教授、博
- 下一篇： 作者：张飞波，华侨大学信息管理系本科在读