A preliminary study on javascript custom events_javascript skills

Also, "Through the event mechanism, classes can be designed as independent modules and communicate externally through events, which improves program development efficiency.".I believe that C# programmers have a deep understanding of the benefits of events. Okay, Code is cheap. Look at the code:
function class1() { // The simplest event design pattern
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
Let’s see how to pass parameters to the event handler:
/ / Encapsulate the parameterized function into a parameterless function
function createFunction(obj, strFunc) {
var args = []; // Define args to store the parameters passed to the event handler
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 // Use a parameterless function to encapsulate the call of the event handler
return function () {
obj[strFunc].apply(obj, args); // Pass parameters 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 passes the name of a function without any parameter information, it cannot pass parameters in." This is something to be discussed later. "To solve This problem can be considered from the opposite way. Instead of considering how to pass parameters in, consider how to build an event handler without parameters. This program is created based on the event handler with parameters and is an outer layer. Encapsulation. ", the "program" here is the createFunction function, which cleverly uses the apply function to encapsulate functions with parameters into parameterless functions.Finally, let’s look at how to implement multi-binding of custom events:
// Make custom events support multi-binding
// Encapsulate functions with parameters into functions without parameters
function createFunction(obj , strFunc) {
var args = []; // Define args to store parameters passed to the event handler
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 // Use parameterless function Encapsulate the call of the event handler
return function () {
obj[strFunc].apply(obj, args); // Pass parameters to the specified event handler
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; 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 see that the basic idea of ​​the attachOnShow method is to push the array. In fact, we can also remove the event processing after the event execution is completed. Function, implemented separately below:
// Encapsulate the function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; // Define args for storage and transfer Parameters to the event handler
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 // Use a parameterless function to encapsulate the call of the event handler
return function () {
obj[strFunc] .apply(obj, args); // Pass parameters to the specified event handler
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) { // Attach event
if ( ! this .onShow) { this .onShow = []; }
this . onShow.push(_eHandler);
},
detachOnShow: function (_eHandler) { // Remove 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(); // Remove both and display none
}
Let’s learn about custom events here first.