Overview of js custom events and event interaction principles (2)_javascript skills

The purpose of js custom events (1) is just to let everyone simply understand how custom events are simulated. It is not difficult to find that there will be many defects, such as:
1. This event object can only register one event. Provide multiple events
2. The registration method does not return some information

Let’s solve these problems below. The following is the source code of MyEvent.js:

Copy code The code is as follows:

function MyEvent() {
this.handlers={};
}
MyEvent.prototype={
addHandler:function(type,handler)
{
if(typeof this.handlers[type] == "undefined")
{
this.handlers[type]=[];
}
this.handlers[type].push(handler);
},
fire:function(event)
{if(this.handlers[event.type] instanceof Array)
{
var handlers=this.handlers[event.type];
for(var i= 0, len=handlers.length;i{
handlers[i](event);
}
}
},
removeHandler:function(type , handler)
{
if(this.handlers[type] instanceof Array)
{
var handlers=this.handlers[type];
for(var i= 0, len= handlers.length;i{
if(handlers[i]===handler)
{
break;
}
}
handlers. splice(i,1);
}
}
};

This type is the optimization of the first article.
The attribute handler becomes handlers and becomes an array.
The addHandler() method accepts two parameters: the event type and the function used to handle the event. When this method is called, a check will be made to see if there is already an array
for this event type in the handlers attribute; if not, a new one will be created. Then use push() to add that handler to the end of the array.

The fire() method is used to trigger an event. This method accepts a parameter, which is an object containing at least the type attribute. Otherwise, it cannot be determined whether the handlers already exist. It will use this type to find a set of handlers corresponding to the event type, call each function, and give the event object. Because these are custom objects, other things on the event object can be defined by you.

The removeHandler() method is an auxiliary to addHandler(). They accept the same parameters: the type of event and the event handler. This method searches the array of event handlers to find the location of the handler to be removed. If found, use the break operator to exit the loop. The item is then removed from the array using the splice() method.

Let’s change the usage method here to a longer-used form. Now according to my knowledge, many products have two ways to use events. One is direct inheritance (js does not have this concept in this province, but we can By simulating the effect of inheritance through the prototype chain (not explained in detail here), this event object will have these behaviors, but this method is more limited. Another way is more common, which is to create it on the class using the event. A property to hold this object. For example: create a Student.js file in the same directory, the code inside is as follows:

Copy the code The code is as follows:

function Student(name)
{
this.myEvent=new MyEvent();
this.name=name;
}
Student.prototype={
setName:function(name)
{
var eventStart={
type:"changeNameStart",
newName:name,
oldName:this.name
};
this.myEvent.fire(eventStart);
this.name=name;
}
}

There is a student class here, and a MyEvent object is initialized in the constructor as Attribute, initialize the name attribute through parameters.

Provides a method setName for changing the name, but before changing the name, a listener that may trigger the event changeNameStart is set.
Create an html page and place it in the same directory. The code is as follows:

Copy the code The code is as follows:

This will be very convenient to use and is also a common way of use.
Generally when using events in real projects, we still need to do some optimization, such as:
1. Users do not know what events we provide. From the code, it seems that any event can be added to handlers. , but the event that really takes effect (where we set the fire() method) cannot be seen intuitively from the code. Generally, when making products, we need to consider this aspect.

2. Did you find that the parameter event of fire does not seem to be fixed. In the Daxing project, it is best to make the event a type. It is more convenient to use in the fire place. There may be many kinds of events. Type, then there may be some judgments in fire.
I hope it will be helpful to readers who are new to js events and can communicate with each other.