This article describes the usage of custom events in JavaScript. Share it for your reference. The specific analysis is as follows:
In web front-end development, many people may not use JS custom events, but if you are doing a relatively large project, especially when multiple people develop together, custom events are very important. So, what are custom events in js? Let's first look at an example:
Front-end developer A encapsulates a function:
alert(a); //This represents N lines of code
}
After a while, front-end developer B will enrich this function based on A, so he will write like this:
alert(a); //This represents N lines of code
alert(b); //This represents N lines of code
}
Have you discovered the problem? B should pay attention to the naming and conflict issues with variables, functions, etc. with A. After a while, front-end developer C should also enrich this function, so:
alert(a); //This represents N lines of code
alert(b); //This represents N lines of code
alert(c); //This represents N lines of code
}
It will be crazy at this time, and I'm sure it won't be easy for C to write the code. The solution to this problem is to customize the event, we know that an element can add the same event without affecting each other, such as:
alert(1);
} ,false);
('click',function(){
alert(2);
} ,false);
When clicking on the page, 1 and 2 will pop up, so we can use this method to define our function:
alert(3);
} ,false);
('move',function(){
alert(4);
} ,false);
In this way, when we execute move();, 3 and 4 will pop up. Here, move is a custom event, it is actually a function
Let's see how to pass parameters to event handlers:
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 < ; i++) (arguments[i]);
//Use parameterless function 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() {
();
},
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:
//Encapsulate a function with parameters into a function 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 < ; i++) (arguments[i]);
//Use parameterless function 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 () {
for (var i = 0; i < ; i++) {
[i]();
}
}
},
attachOnShow: function(_eHandler) {
if (!) { = []; }
(_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:
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 < ; i++) (arguments[i]);
//Use parameterless function 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 () {
for (var i = 0; i < ; i++) {
[i]();
}
}
},
attachOnShow: function(_eHandler) { // Additional event
if (!) { = []; }
(_eHandler);
},
detachOnShow: function(_eHandler) { // Remove event
if (!) { = []; }
(_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"));
(); // Remove both, and none of them are displayed
}
I hope this article will be helpful to everyone's JavaScript programming.