Summary of JS control events_javascript skills

Overview:

Events are crucial for controls. The message communication mechanism of the control uses events at the lowest cost. However, there are some troubles to be solved for JS controls. The JS class itself does not support events, and the DOM model does. The event is only applicable to the browser's DOM nodes. So creating a set of events is what we need to do before we write the control.

Event Mechanism

I don’t want to say more about the event mechanism. The descriptions of events in various languages ​​are very specific, and they are all an implementation of the observer pattern. , we can extract the necessary interface for the event (since the control library is based on jQuery, the interface is consistent with jquery):

1.on: Bind event

2.off: Delete event

3.fire: Trigger event

4.addTarget: Add bubbling object

5.publish: Allow event bubbling

Events in jQuery

The event functions in jQuery are very rich, but they must be jQuery objects to support them. The control classes we define cannot directly use jQuery events, and there are also problems with the context of the events, so We need to encapsulate the control's events ourselves.

Callbacks in jQuery is a mechanism for callbacks added in 1.7. It is very convenient to use, but the problem is that the specified context needs to be specified when it is triggered. We can encapsulate it into our own event class.

Binding event:

Function prototype: function on(eventType,callback) Parameters:
1.eventType: event type
2.callback: Callback function
3.scope: The context of the callback function. This variable is rarely used in the real control binding process, and there are alternatives, so for the sake of simplicity, the scope variable is used in this function and all functions below was introduced in .

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

Delete binding:
Function prototype: function off(eventType,callback) Parameters are the same as above:

1.eventType: event type
2.callback: callback function, when this variable is omitted, all bound functions of this event type are deleted.
In the process of real control development and use, deleting events is much more troublesome than binding events. When deleting events, you need to have a reference to the function when binding the event. If you need to delete and add the same event frequently, please consider Use delegate

to trigger an event
function prototype: fire(eventType) :

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

There are 2 points to note here:

1. The way to trigger events, we use the 'stopOnFalse' method here, which is bound to the same event type The following functions are executed sequentially. If one of the return values ​​​​is false, then the following functions terminate execution. For other ways to trigger events, refer to jquery’s Callbacks.

2. Whether the event is executed by bubbling, that is to say, if a control has multiple sub-controls, then when the sub-control triggers a click event, it can bubble up to the parent control. We only need to listen to the parent control's Just bubble the event

Event bubbling

Function prototype: function(eventType,bubble):

1.eventType: Event type
2.bubble: Whether to bubble

This function is used in conjunction with function addTarget(control).

addTarget adds the object to which the event bubbles. In the control implementation, the parent control of the control is specified by default as the object to which it bubbles.

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

1. After the event is bound, the addition and deletion of sub-controls will not be affected

2. Events are more convenient to use, and there is no need to understand the internals of the control

Corresponding to event bubbling is delegation (delegate and undelegate). Delegation relies on event bubbling. Both DOM event mechanism and jQuery support delegation. , this is because the browser itself supports DOM event bubbling, and the event bubbling mechanism we implemented on the control is enough for us to achieve the effect of delegation, so we will not implement the delegation interface.


Event code implementation

I wrote the specific code implementation and some help methods in the following code, which is not convenient to expand in the article, if you are interested You can take a look and see that the subsequent control libraries are based on these helper methods and event objects. Other help methods in the file are explained in other chapters.