JavaScript because JavaScript is not really an "object-oriented" language, there are always some difficulties in implementing the event-driven model.
Of course, the event driver here refers not to the intrinsic event-handling mechanism of JavaScript or the DOM's event model, but to the type of event model like C # or Java.
The biggest problem with JavaScript when dealing with event drivers is the "this pointer" confusion.
For example: <input type= "button" Onclick=function () {alert (this.value);} value= "Hello world!" />
Here's the this pointer no doubt is no problem
However, <input type= "button" id= "Button1"/>
var objbtn = document.getElementById ("button1");
Objbtn.attachevent (' onclick ', EventHandler);
function EventHandler ()
{
alert (this.value);
}
Running this script was surprised to find that the results were completely wrong.
Because this is not OBJBTN this input object! But the global window Object!
Similar problems often occur in JavaScript
Another example is a more complex application:
function MainForm (form)
{
This.form = form;
This.button1 = Form.buttonok;
This.button2 = Form.buttoncancel;
This.button1.onclick = button1_click; Registering a Click event for a button
This.button2.onclick = button2_click;
Mainform.prototype. Button1_Click = function ()
{
alert (This.button1.value);
}
MainForm.prototype.Button2_Click = function ()
{
This.form.style.display = ' None ';
}
}
Originally a very "beautiful" code, but can not run correctly, why? The original question is still on this, button1_clicked and button2_clicked two functions, although they are member functions of the MainForm class, But they are called by This.button1.onclick and This.button2.onclick (not exactly accurate), so this in the function refers to the Button1 and button2 two objects! It's disturbing, isn't it?
To solve this problem, it is necessary to ensure that the function caller is a MainForm object instead of a button or any other member, so I think of an event registration mechanism that writes the above code:
This.button1.ClickEventSender = this;
This.button1.onclick = function () {this. Clickeventsender.button1_click (this. clickeventsender,self.event);}
MainForm.prototype.Button1_Click = function (object, sender)
{
alert (This.button1.value);
}
We get the right result.
So, a complete "background code" of the "event-driven" model slowly formed, the following is a short demo code:
Background code
Event-Driven Framework (demo)
2004-11-16 Created
2004-11-17 Modified
Controldemo.js
function Controldemo (page)
{
Initialize page
if (page = = null)
{
page = self;
}
if (page!= self)
{
Do sth. Here ...
}
this.page = page;
Properties
this.keypressed = 0;
Controlable Entities
Pagebody Registration Pageload Event
This.body1 = Page.document.getElementById ("main");
This.page.PageLoadEventSender = this;
This.body1.onload = function () {this. Pageloadeventsender.pageload (this. pageloadeventsender,page.event);}
Button1 Register Click event
This.button1 = Page.button1;
This.button1.value = "OK";
This.button1.ClickEventSender = this;
This.button1.onclick = function () {this. Clickeventsender.button1_click (this. clickeventsender,page.event);}
Button2 Register Click event
This.button2 = Page.button2;
This.button2.value = "Cancel";
This.button2.ClickEventSender = this;
This.button2.onclick = function () {this. Clickeventsender.button2_click (this. clickeventsender,page.event);}
Textbox1 registration KeyUp, MouseMove events
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 event handler function
ControlDemo.prototype.PageLoad = function (sender,event)
{
This.page.defaultStatus = "Event-Driven Framework demo ~ ~";
This.page.resizeTo (600,400);
}
ControlDemo.prototype.Button1_Click = function (sender,event)
{
Alert ("Hello ^_^");
}
ControlDemo.prototype.Button2_Click = function (sender,event)
{
if (Page.opener = null)
{
Page.opener = page;
}
Page.close ();
}
ControlDemo.prototype.Textbox1_KeyUp = function (sender, event)
{
this.keypressed++;
This.label1.innerText = this.keypressed;
This.label2.innerText = This.textbox1.value.length;
This.label3.innerText = Event.keycode;
}
ControlDemo.prototype.Textbox1_MouseMove = function (sender, event)
{
This.page.status = "Mouse position: x=" +event.x+ "y=" +EVENT.Y;
}
}
<!--front page-->
<title> Event-Driven framework demo </title>
<body id = "main" >
<div align= "center" id= "Div1" >
<textarea name= "TextBox1" Id= "TextBox1" ></textarea><br/>
The number of keyboard clicks is <span id= "Label1" >0</span> times, type <span id= "Label2" >0</span> characters, the last character code entered is
<span id= "Label3" >0</span>
<br/>
<input type= "button" Name= "Button1" id= "Button1" ></input>
<input type= "button" Name= "Button2" id= "Button2" ></input>
</div>
</body>
<script language= "javascript" type= "Text/javascript" src= "Controldemo.js" ></script>
<script language= "javascript" type= "Text/javascript" >
var demo = new Controldemo ();
</script>
Does it feel like the code on the page is simple?
Almost just place objects and construct classes, and do nothing else.
and the writing background code is to make use of asp.net friends have a "déjà vu" feeling?
Although dare not say must be good, but, this is the alternative power of JavaScript. ^^
