JS control event

JS control event

Overview:

Events are crucial to controls. The messaging mechanism of controls uses events at the lowest cost. However, for JavaScript controls, there is some trouble to solve. JS classes do not support events themselves, the events supported by the DOM model are only applicable to the DOM nodes of the browser. Therefore, we need to create a set of events before writing controls.

Event Mechanism

I don't want to talk much about the event mechanism. The event descriptions in various languages are very specific and are implemented in the Observer mode, we can extract the interface required for the event (because the control library is based on jQuery, the interface is consistent with jquery ):

1. on: bind events

2. off: delete an event.

3. fire: trigger event

4. addTarget: Add a bubble object

5. publish: Allow event bubbling

Events in jQuery

The event functions in jQuery are rich and missing, but they must be supported by jQuery objects. The control classes we define cannot directly use jQuery events, and the event context is also problematic, therefore, we need to encapsulate the control events.

Callbacks in jQuery is a callback mechanism added in 1.7, which is convenient to use. However, the problem is that the context must be specified during triggering, we can encapsulate it into our own event class.

Bind event:

Function prototype: function on (eventType, callback) parameter:

1. eventType: Event Type

2. callback: callback function

3. scope: Context of the callback function. This variable is rarely used in the real control binding process, and there are alternative solutions, so for the sake of simplicity, scope variables are introduced in this function and all the functions below.

The context of the callback function above is the control bound to the event.

 

Delete binding:

Function prototype: function off (eventType, callback) parameters are the same as above:

1. eventType: Event Type

2. callback: callback function. If this variable is omitted, all binding functions of this event type are deleted.

In real control development and use, deleting events is much more troublesome than binding events. When deleting events, you need to reference functions when binding events, if you need to frequently Delete and add the same event, consider using delegate.

Trigger event

Function prototype: fire (eventType ):

1. eventType: event type, bound to this type of function execution on the object.

Note the following two points:

1. how to trigger an event. Here we use the 'stoponfalse' method, that is, the function is executed in sequence bound to the same event type. If one return value is false, then the following function is terminated. For more information about how to trigger events, see Callbacks of jquery.

2. whether to perform event bubbling. That is to say, if a control has multiple sub-controls, the sub-control can bubble up to the parent control when triggering a click event. We only need to listen to the bubble event of the parent class.

Event bubbling

Function prototype: function (eventType, bubble ):

1. eventType: Event Type

2. bubble: whether to bubble

This function matches function addTarget (control.

AddTarget adds events to the bubble object. In the control implementation, the parent control of the control is specified by default as its bubble object.

As mentioned in the trigger event above, allowing control events to bubble has many advantages:

1. After the event is bound, the addition and deletion of the Child control will not be affected.

2. events are more convenient to use, so you do not need to understand the internal control.

The delegate corresponds to the event bubbles (delegate and undelegate). The delegate depends on Event bubbles. DOM's event mechanism and jQuery both support delegation, because the browser itself supports DOM Event bubbles, the event bubbling mechanism we implement on the control is sufficient for implementing the delegate effect, so we will not implement the delegate interface.

Events supported by the control:

In the previous section, I talked about the status of controls and attributes derived from these states. In theory, an event is triggered when the status of each control changes, when each attribute value changes, corresponding events should also be thrown. When the status changes, two more events are triggered. before and after. Taking the selected status as an example, we will have the following events:

1. beforeSelectedChange event, which occurs before selection

2. afterSelectedChange event, which occurs after selection

An Attribute related to the selected Attribute. When the selectable is changed, we also need to throw an event, that is

1. beforeSelectableChange event

2. afterSelectableChange event

Take the table as an example. If we set an optional column, we should mark this column as optional. When the afterSelectableChange event occurs, we should change the Column Style and mark this column as optional. As for how to trigger two related events when the attribute values change, we should have a general mechanism. In the subsequent sections, we will share the JS control attributes with you one by one.

Changing attributes triggers events, which can bring great benefits to our controls and greatly improve scalability and ease of use.

Event code implementation

The specific code implementation and some help methods are written into the following code, which is not easy to expand in the article. If you are interested, please take a look, the following control libraries are based on these help methods and event objects. Other help methods in the file are described in other chapters.

Tools and events