JavaScript Custom Event Usage Analysis _ javascript skills

This article mainly introduces the usage of custom events in JavaScript, analyzes in detail the principles and usage of custom events, and provides some reference value, for more information about how to use custom events in JavaScript, see the examples in this article. Share it with you for your reference. The specific analysis is as follows:

In front-end web development, many people may not use js custom events, but if it is a relatively large project, especially when multiple people work collaboratively, custom events are very important. So what is a custom event in js? Let's take an example:
Front-end developer A encapsulates A function:

The Code is as follows:

Function move (){
Alert (a); // This represents N lines of code
}

After A while, front-end developer B needs to enrich this function based on A, so he will write:

The Code is as follows:

Function move (){
Alert (a); // This represents N lines of code
Alert (B); // This represents N lines of code
}

If the problem is found, B should pay attention to the naming and conflict with the variables and functions of A. After A while, the front-end developer C should also enrich the function, so:

The Code is as follows:

Function move (){
Alert (a); // This represents N lines of code
Alert (B); // This represents N lines of code
Alert (c); // represents N lines of code
}

It will be crazy at this time, and I am sure it will not be easy to write C code. The solution to this problem is to use custom events. We know that the same events can be added to an element without affecting them, for example:

The Code is as follows:

Window. addEventListener ('click', function (){
Alert (1 );
}, False );
Window. addEventListener ('click', function (){
Alert (2 );
}, False );

When you click on the page, both 1 and 2 will pop up, so we can use this method to define our function:

The Code is as follows:

Window. addEventListener ('move ', function (){
Alert (3 );
}, False );
Window. addEventListener ('move ', function (){
Alert (4 );
}, False );

In this way, 3 and 4 will pop up when we execute move (); here the move is a custom event, which is actually a function

Let's take a look at how to pass parameters to the event handler:

The Code is as follows:

// 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:

The Code is as follows:

// 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:

The Code is as follows:

// 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.
}

I hope this article will help you design javascript programs.