Learning notes for custom events in JavaScript

In the Web front-end development, many people may not use JS custom events, but if it is to do a relatively large project, especially when many people collaborate development, custom events appear to be very important. So, what is a custom event in JS? Let's take a look at an example:

Front-End developer a encapsulates a function:

The code is as follows	Copy Code
function Move () { alert (a); To represent the N line of code. }

Over time, the front-end developer B is going to enrich the function on a basis, so he writes:

The code is as follows	Copy Code
function Move () { alert (a); To represent the N line of code. alert (b); To represent the N line of code. }

is not found the problem, B to pay attention to and A's variables, functions, and so on naming and conflict issues, and over time, front-end developer C to enrich this function, so:

The code is as follows	Copy Code
function Move () { alert (a); To represent the N line of code. alert (b); To represent the N line of code. alert (c); To represent the N line of code. }

This is going to be really crazy, C. I'm sure it won't be easy to write code. The way to solve this problem is by customizing the event, and we know that an element can add the same event without affecting itself, such as:

The code is as follows	Copy Code
Window.addeventlistener (' click ', function () { Alert (1); }, False); Window.addeventlistener (' click ', function () { Alert (2); }, False);

When you click on the page, 1 and 2 will pop up, so we can define our function in this way:

The code is as follows	Copy Code
Window.addeventlistener (' Move ', function () { Alert (3); }, False); Window.addeventlistener (' Move ', function () { Alert (4); }, False);

So, when we execute move (), we pop 3 and 4, and the move is the custom event, which is actually a function

Let's see how to pass parameters to an event handler:

The code is as follows

Copy Code

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:

The code is as follows

Copy Code

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:

The code is as follows

Copy Code

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.