Incomplete analysis of JavaScript event drive models

Since JavaScript is not a "object-oriented" language, it will always encounter some difficulties when implementing an event-driven model.

Of course, the event driver refers to the event handling mechanism of JavaScript, or the event model of the DOM, but is the event model similar to C # or Java.

JavaScript is the biggest problem when processing event drivers is "this pointer" confusion.

For example:

There is no problem with the THIS pointer here.

However,

Var objbtn = document.getlementByid ("Button1");

Objbtn.attachevent ('Onclick', EventHandler);

Function EventHandler ()

{

Alert (this.Value);

}

Running this script is very surprised to find out the result of a complete error

Because this this is not Objbtn this INPUT object! But the global Window object!

Similar questions will appear often in JavaScript

A more complex application:

Function Mainform (Form)

{

THIS.FORM = form;

THIS.BUTTON1 = form.buttonok;

THIS.BUTTON2 = form.buttoncancel;

this.button1.onclick = button1_click; // Register for the 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 "beautiful" code, but can't run correctly, why? Originally, on this, Button1_Clicked and Button2_Clicked two functions are the member functions of the Mainform class, but they are called this.button1.onclick and this.button2.onclick (not fully accurate statement), so in functions This refers to both objects of Button1 and Button2! This is very troublesome, isn't it?

In order to solve this problem, you must ensure that the function caller is the mainform object instead of button or other members. To this end, I think about a mechanism for event registration, write the above code:

THIS.BUTTON1.Clickevent Sheventsender = this

This.button1.onclick = function () {this.clickeventsender.button1_click (this.clickeventsender, self.event);

Mainform.Prototype.Button1_Click = Function (Object, Sender)

{

Alert (this.button1.value);

Get the correct result.

Thus, a complete "event-driven" model based on "background code" is slowly formed, the following is a short DEMO code:

// Background code

// Event Driver 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 Register PageLoad Event

THIS.BODY1 = Page.Document.getlementByid ("main");

this.pageloadaDeventsender = this;

THIS.BODY1.ONLOAD = function () {this.pageload (this.pageloadeventsender, page.event);

// Button1 Register Click event

THIS.BUTTON1 = Page.Button1;

this.button1.value = "OK";

THIS.BUTTON1.Clickevent Sheventsender = 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.Clickevent Sheventsender = THIS;

This.button2.onclick = function () {this.clickeventsender.button2_click (this.clickeventsender, page.event);

// TextBox1 Register Keyup, MouseMove Event

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.getlementByid ("label1");

This.Label2 = page.document.getlementByid ("label2"); this.label3 = page.document.getlementByid ("label3");

// EventHandlers event handler

ControlDemo.Prototype.pageLoad = function (sender, event)

{

This.page.defaultstatus = "Event Driver 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;

}

}