A Preliminary Study on javascript custom events _ javascript skills

Source: Internet
Author: User
& 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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.