javascript事件驱动框架

时间:2022-08-26 16:54:29

一个简单的事件驱动框架的演示:
/*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>