Generally, some common event handlers can be called in Javascript, such:
Objbutton. onclick = doclick;
Function doclick (Event)
{
// Do something...
}
However, this method has one disadvantage in event processing, that is, each event can only correspond to one processing program. Of course, the processing program can be written into one function,
However, if this is the case, it lacks flexibility and cannot be set dynamically. Therefore, write a javascript eventhandler to implement
VaR jsevent = new array ();
Jsevent. eventrouter = function (El, eventtype)
{
This. lsnrs = new array (); // container for placing subscription members
This. El = El; // reference DOM elements
El. eventrouter = This; // You can reference the event processing class to obtain the context of the event processing class.
El [eventtype] = jsevent. eventrouter. Callback; // subscribe to the events of the DOM element.
}
Jsevent. eventrouter. Prototype. addlistener = function (lsnr) // Add a member function to eventrouter.
{
This. lsnrs. append (lsnr, true );
}
Jsevent. eventrouter. Prototype. removelistener = function (lsnr) // Add a member function to eventrouter
{
This. lsnrs. Remove (lsnr );
}
Jsevent. eventrouter. Prototype. Role y = function (e) // call the subscription function cyclically.
{
VaR lsnrs = This. lsnrs; // reference the subscription Array
For (VAR I = 0; I <lsnrs. length; I ++)
{
VaR lsnr = lsnrs [I];
Lsnr. Call (this, e); // call a function using the call function. This: context of eventrouter; E: Event
}
}
Jsevent. eventrouter. Callback = function (event) // converts the context called by the event, because this represents the DOM element itself.
{// Context (that is, this) must be directed to eventrouter
VaR E = event | window. event;
VaR router = This. eventrouter;
Router. Notify (E );
}
Save the preceding functions to the JS file, and you can subscribe to DOM elements on the client.
The Code is as follows:
<HTML>
<Head>
<LINK rel = 'stylesheet 'Type = 'text/CSS 'href}'mousemat.css'/>
<SCRIPT type = 'text/JavaScript 'src = 'eventrouter. js'> </SCRIPT>
<SCRIPT type = 'text/JavaScript '>
Window. onload = function (){
VaR objbutton = Document. getelementbyid ('click ');
VaR buttonclick = new jsevent. eventrouter (objbutton, "onclick ");
Buttonclick. addlistener (writeabc );
Buttonclick. addlistener (writeefg );
}
Function writeabc ()
{
VaR divdisplay = Document. getelementbyid ('display ');
Divdisplay. innertext = "ABC ";
}
Function writeefg ()
{
Alert ("EFG ");
}
</SCRIPT>
</Head>
<Body>
<Div class = 'mousemat 'Id = 'mousemat'> </div>
<Div class = 'thumbnail 'Id = 'thumbnail'>
<Div class = 'cursor 'Id = 'cursor'/>
</Div>
</Body>
</Html>