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:
Copy the code as follows: function move(){
alert(a); //This represents N-line code
}
After a while, front-end developer B will enrich this function based on A, so he will write like this:
Copy the code as follows: function move(){
alert(a); //This represents N-line 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:
Copy the code as follows: function move(){
alert(a); //This represents N-line 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:
The code copy is as follows: window.addEventListener('click',function(){
alert(1);
} ,false);
window.addEventListener('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:
The code copy is as follows: window.addEventListener('move',function(){
alert(3);
} ,false);
window.addEventListener('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:
Copy the code as follows: //Encapsulate the function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; //Define args to store parameters passed to event handlers
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 < arguments.length; i++) args.push(arguments[i]);
//Use the call of event handler with a parameterless function
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 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:
Copy the code as follows:// to enable custom events to support multiple bindings
//Encapsulate a function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; //Define args to store parameters passed to event handlers
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 < arguments.length; i++) args.push(arguments[i]);
//Use the call of event handler with a parameterless function
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]();
}
}
},
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 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:
Copy the code as follows: //Encapsulate the function with parameters into a function without parameters
function createFunction(obj, strFunc) {
var args = []; //Define args to store parameters passed to event handlers
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 < arguments.length; i++) args.push(arguments[i]);
//Use the call of event handler with a parameterless function
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]();
}
}
},
attachOnShow: 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 one
obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
obj.show(); // Both are removed, and none are displayed
}
I hope this article will be helpful to everyone's JavaScript programming.