Preliminary study on custom events in javascript

Also, "through the event mechanism, classes can be designed as independent modules, and the development efficiency of programs can be improved through external communication of events." I believe that C# programmers have a deep understanding of the benefits of events. OK, Code is cheap. Look at the code:
function class1() { // The simplest event design pattern
}
= {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
= function () {
alert( " test " );
}
();
}
Let's see how to pass parameters to event handlers:
// Encapsulate a function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; // Define args to store parameters passed to event handlers
if ( ! obj) obj = window; // If it is a global function, obj=window;
// Get the parameters passed to the event handler
for ( var i = 2 ; i < ; i ++ ) (arguments[i]);
// Use parameterless functions to encapsulate the call of event handler
return function () {
obj[strFunc].apply(obj, args); // Pass the parameter to the specified event handler
}
}
function class1() {
}
= {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function test() {
var obj = new class1();
var userName = " test " ;
= createFunction( null , " objOnShow " , userName);
();
}

"Because the event mechanism only passes the name of a function without any parameter information, it is impossible to pass the parameters in." This is a later story. "To solve this problem, you can consider from the opposite idea, not considering how to pass the parameters in, but consider how to build an event handler without parameters. The program is created based on an event handler with parameters and is an outer encapsulation." The "program" here is the createFunction function, which cleverly uses the apply function to encapsulate the function with parameters into a parameterless function. Finally, let's take a look at how to implement multi-binding for custom events:
// Make custom events support multiple bindings
// Encapsulate a function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; // Define args to store parameters passed to event handlers
if ( ! obj) obj = window; // If it is a global function, obj=window;
// Get the parameters passed to the event handler
for ( var i = 2 ; i < ; i ++ ) (arguments[i]);
// Use parameterless functions to encapsulate the call of event handler
return function () {
obj[strFunc].apply(obj, args); // Pass the parameter to the specified event handler
}
}
function class1() {
}
= {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
(createFunction( null , " objOnShow " , userName));
(createFunction( null , " objOnShow2 " , " test message " ));
();
}
We see that the basic idea of ​​the attachOnShow method implementation is to push the array. In fact, we can also remove the event handler function after the event is executed, and implement it separately below:
// Encapsulate a function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; // Define args to store parameters passed to event handlers
if ( ! obj) obj = window; // If it is a global function, obj=window;
// Get the parameters passed to the event handler
for ( var i = 2 ; i < ; i ++ ) (arguments[i]);
// Use parameterless functions to encapsulate the call of event handler
return function () {
obj[strFunc].apply(obj, args); // Pass the parameter to the specified event handler
}
}
function class1() {
}
= {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // Additional event
if ( ! this .onShow) { this .onShow = []; }
this .(_eHandler);
},
detachOnShow: function (_eHandler) { // Remove event
if ( ! this .onShow) { this .onShow = []; }
this .(_eHandler);
}
}

function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
(createFunction( null , " objOnShow " , userName));
(createFunction( null , " objOnShow2 " , " test message " ));
();
(createFunction( null , " objOnShow " , userName));
(); // Remove one and display the remaining one
(createFunction( null , " objOnShow2 " , " test message " ));
(); // Both are removed, and no one is displayed
}
Let’s stop here when learning about custom events.