A preliminary study of JavaScript custom events _javascript Tips

Also, "through the event mechanism, the class can be designed as a separate module, through the event external communication, improve the development efficiency of the program." ”。 believe that C # programmers are deeply aware of the benefits of events. Well, the code is cheap. Look at the codes:
function Class1 () {//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 an event handler:
To encapsulate a function with parameters as a function without parameters
function createfunction (obj, Strfunc) {
var args = []; Defines args used to store parameters passed to an event handler
if (! obj) obj = window; If the global function is Obj=window;
Get the arguments passed to the event handler
for (var i = 2; I < arguments.length i + +) Args.push (Arguments[i]);
To encapsulate the invocation of an event handler with a parameter-free function
return function () {
Obj[strfunc].apply (obj, args); Passing 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 parameters of the information, so can not pass parameters into the", this is something, "to solve this problem, can be considered in the opposite way, regardless of how to pass the parameters, but consider how to build a parameter-free event handler, The program is created from an event handler with parameters and is an outer encapsulation. "The program" here is the Createfunction function, which skillfully encapsulates a function with parameters as a parameterless function using the Apply function. Finally, let's look at how to implement multiple bindings for custom events:
Enable custom events to support multiple bindings
To encapsulate a function with parameters as a function without parameters
function createfunction (obj, Strfunc) {
var args = []; Defines args used to store parameters passed to an event handler
if (! obj) obj = window; If the global function is Obj=window;
Get the arguments passed to the event handler
for (var i = 2; I < arguments.length i + +) Args.push (Arguments[i]);
To encapsulate the invocation of an event handler with a parameter-free function
return function () {
Obj[strfunc].apply (obj, args); Passing parameters 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 see that the basic idea of the Attachonshow method is the push operation of the array, in fact, we can remove the event handler function after the event is finished, and implement the following separately:
To encapsulate a function with parameters as a function without parameters
function createfunction (obj, Strfunc) {
var args = []; Defines args used to store parameters passed to an event handler
if (! obj) obj = window; If the global function is Obj=window;
Get the arguments passed to the event handler
for (var i = 2; I < arguments.length i + +) Args.push (Arguments[i]);
To encapsulate the invocation of an event handler with a parameter-free function
return function () {
Obj[strfunc].apply (obj, args); Passing parameters 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) {//attached event
if (! this. onshow) {this. onshow = [];}
this. Onshow.push (_ehandler);
},
Detachonshow:function (_ehandler) {//removal 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, show the remaining one
Obj.detachonshow (Createfunction (null, "ObjOnShow2", "test Message"));
Obj.show (); Two are removed, one is not displayed
}
Learn about customizing events first come here.