Custom events in Javascript

function Student(){}Student.prototype = {    sayHello:function(){this.onSayHello();},    onSayHello:function(){}    };function test() {     var stu = new Student();    stu.sayHello = function()    {        alert("ok");    }    stu.sayHello();}window.onload = test;

 

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

// Encapsulate a function with parameters as a function without parameters createfunction (OBJ, strfunc) {var ARGs = []; // define the parameter if (! OBJ) OBJ = Window; // if it is a global function, OBJ = Window; // get the parameter passed to the event handler for (VAR I = 2; I <arguments. length; I ++) args. push (arguments [I]); // use a non-Parameter Function to encapsulate the call of the event handler 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:

// Enable custom events to support multiple bindings // encapsulate a function with parameters as a function without parameters createfunction (OBJ, strfunc) {var ARGs = []; // define the parameter if (! OBJ) OBJ = Window; // if it is a global function, OBJ = Window; // get the parameter passed to the event handler for (VAR I = 2; I <arguments. length; I ++) args. push (arguments [I]); // use a non-Parameter Function to encapsulate the call of the event handler 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] () ;}}, attachonsh Ow: 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:

// Encapsulate a function with parameters as a function without parameters createfunction (OBJ, strfunc) {var ARGs = []; // define the parameter if (! OBJ) OBJ = Window; // if it is a global function, OBJ = Window; // get the parameter passed to the event handler for (VAR I = 2; I <arguments. length; I ++) args. push (arguments [I]); // use a non-Parameter Function to encapsulate the call of the event handler 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] () ;}}, attachonsh Ow: function (_ ehandler) {// additional 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 obj. detachonshow (createfunction (null, "objonshow2", "Test message"); obj. show (); // both are removed, and neither is displayed}