& Quot; the event mechanism makes the program logic more in line with the real world. In JavaScript, many objects have their own events. For example, the button has an onclick event, and the drop-down list box has an onchange event, these events allow easy programming. In addition, "through the event mechanism, classes can be designed as independent modules, and the program development efficiency is improved through event communication .". I believe that C # programmers have a deep understanding of the benefits of the event. Okay, Code is cheap. Check the Code:
Function class1 () {// simplest event Design Mode
}
Class1.prototype = {
Show: function (){
This. onShow ();
},
OnShow: function (){}
}
Function test (){
Var obj = new class1 ();
Obj. onShow = function (){
Alert ("test ");
}
Obj. show ();
}
Let's take a look at how to pass parameters to the event handler:
// Encapsulate a function with parameters as a function without Parameters
Function createFunction (obj, strFunc ){
Var args = []; // defines the parameters that args uses to store the parameters passed to the event handler.
If (! Obj) obj = window; // if it is a global function, obj = window;
// Obtain the parameters passed to the event handler.
For (var I = 2; I <arguments. length; I ++) args. push (arguments [I]);
// Encapsulate the call of the event handler using a non-Parameter Function
Return function (){
Obj [strFunc]. apply (obj, args); // pass the parameter to the specified event handler
}
}
Function class1 (){
}
Class1.prototype = {
Show: function (){
This. onShow ();
},
OnShow: function (){}
}
Function objOnShow (userName ){
Alert ("hello," + userName );
}
Function test (){
Var obj = new class1 ();
Var userName = "test ";
Obj. onShow = createFunction (null, "objOnShow", userName );
Obj. show ();
}
"Because the event mechanism only transmits the name of a function and does not contain any parameter information, the parameter cannot be passed in." This is an afterthought. "To solve this problem, you can think about how to build an event handler without parameters instead of passing parameters in, this program is created based on the event handler with parameters and is an outer encapsulation. ", The "program" here is the createFunction function, which cleverly uses the apply function to encapsulate a function with parameters as a non-parameter function. Finally, let's take a look at how to bind custom events:
// Enable multi-bind for custom events
// Encapsulate a function with parameters as a function without Parameters
Function createFunction (obj, strFunc ){
Var args = []; // defines the parameters that args uses to store the parameters passed to the event handler.
If (! Obj) obj = window; // if it is a global function, obj = window;
// Obtain the parameters passed to the event handler.
For (var I = 2; I <arguments. length; I ++) args. push (arguments [I]);
// Encapsulate the call of the event handler using a non-Parameter Function
Return function (){
Obj [strFunc]. apply (obj, args); // pass the parameter to the specified event handler
}
}
Function class1 (){
}
Class1.prototype = {
Show: function (){
If (this. onShow ){
For (var I = 0; I <this. onShow. length; I ++ ){
This. onShow [I] ();
}
}
},
AttachOnShow: function (_ eHandler ){
If (! This. onShow) {this. onShow = [];}
This. onShow. push (_ eHandler );
}
}
Function objOnShow (userName ){
Alert ("hello," + userName );
}
Function objOnShow2 (testName ){
Alert ("show:" + testName );
}
Function test (){
Var obj = new class1 ();
Var userName = "your name ";
Obj. attachOnShow (createFunction (null, "objOnShow", userName ));
Obj. attachOnShow (createFunction (null, "objOnShow2", "test message "));
Obj. show ();
}
We can see that the basic idea of the attachOnShow method is to push the array. In fact, we can also remove the event processing function after the event is executed. The following is an independent implementation:
// Encapsulate a function with parameters as a function without Parameters
Function createFunction (obj, strFunc ){
Var args = []; // defines the parameters that args uses to store the parameters passed to the event handler.
If (! Obj) obj = window; // if it is a global function, obj = window;
// Obtain the parameters passed to the event handler.
For (var I = 2; I <arguments. length; I ++) args. push (arguments [I]);
// Encapsulate the call of the event handler using a non-Parameter Function
Return function (){
Obj [strFunc]. apply (obj, args); // pass the parameter to the specified event handler
}
}
Function class1 (){
}
Class1.prototype = {
Show: function (){
If (this. onShow ){
For (var I = 0; I <this. onShow. length; I ++ ){
This. onShow [I] ();
}
}
},
AttachOnShow: function (_ eHandler) {// additional event
If (! This. onShow) {this. onShow = [];}
This. onShow. push (_ eHandler );
},
DetachOnShow: function (_ eHandler) {// remove an event
If (! This. onShow) {this. onShow = [];}
This. onShow. pop (_ eHandler );
}
}
Function objOnShow (userName ){
Alert ("hello," + userName );
}
Function objOnShow2 (testName ){
Alert ("show:" + testName );
}
Function test (){
Var obj = new class1 ();
Var userName = "your name ";
Obj. attachOnShow (createFunction (null, "objOnShow", userName ));
Obj. attachOnShow (createFunction (null, "objOnShow2", "test message "));
Obj. show ();
Obj. detachOnShow (createFunction (null, "objOnShow", userName ));
Obj. show (); // remove one and display the remaining one.
Obj. detachOnShow (createFunction (null, "objOnShow2", "test message "));
Obj. show (); // both are removed and none are displayed.
}
Learn about custom events first here.
