JavaScript Event Detail-zepto Event implementation

The event of Zepto

Can be combined with an explanation of the previous JavaScript event-native Event Basics (i) Comprehensive consideration
The source is not a table, GitHub and the Chinese site can be down to the latest version of the Zepto. The entire event module is not long, 274 lines, we can see that the entire event module, the core of events binding is on and off, there is a trigger to trigger, class Observer mode, First look at Uncle Tom's in-depth understanding of the JavaScript series (32): The design mode of the observer pattern, the rest is the implementation of the processing function.
Let's start with a demo:

$("#btn").on("click",function(event){ console.log(event);})

A simple click event Listener example.
Depending on the use of events in the event module:

On for start (add)

As you can see, the binding function has five parameters:

• Event type, which can be added by a string of spaces ("click MouseDown"), or the event type is a key, the function is a value ({click:function (), Mousedown:function ()}).
• Selector: the node selector for the event delegate, which does not pass
• Data: The Event.data property in the event handler
• Callback: callback function for event handlers
• One: Only triggers a callback once the event is bound

According to the parameters, we can easily divide the on into several parts (shown):

1. Recursive sequence, handling event as a key-value pair
2. Shorthand, if it's just a simple event and callback ($ ("#btn"). On ("click", Function () {})), the one parameter does not participate in shorthand, there is a single () method.
3. Loop the Zepto object, because here the $this is the object generated after Zepto.init, where one and selector are Autoremove (only a single callback is triggered), Delegetor (event proxy), then add (event Registration)

Autoremove, if one is true, that is, to use only once, remove is used and an event object is set up for callback through apply.
In Delegator, if selector is a child of the binding element, Zepto takes the event.target as the target element, determines whether the parent of the trigger node is consistent with the incoming selector, and the context is the node after the traversal. It then creates a copy of the event object (Createproxy), returns an event handled by the compatible () function, and, of course, registers with Add ():

First of all, there is a handlers object in the Zid,zepto that holds the processed event object, the _zid initial value is 1, each time the value is stored in handlers, and the _zid in the event object is modified, each time a bound event is deposited:

Because the Zepto objects created every time you use $ () are new, you can use handlers to build a queue for better management.
This is followed by the processing of a string that is split as a blank character (/\s/), handle is created internally, and note that its parse method is an internal method, not a date.parse ().

As mentioned before, the bubbling event will have side effects,mouseover and mouseout, if it's just a simple node, no problem, but after having a child node. Events that were previously listening to the parent node are triggered again when the mouse is moved over. This is because the listener is the entire parent node, while moving to the child node, the child node does not have an event, so the bug caused by bubbling up, and in the DOM3 level, the new definition of two non-bubbling events: Mouseenter,mouseleave, using these two events, you can solve the problem. In Zepto, the Relatedtarget property is used, and the node that is triggered using contains determines that the callback is executed when it is not part of the move-out (mouseover) and is moved in (mouseout). It is compatible with cases where the MouseEnter and MouseLeave events are not supported.

Then call AddEventListener, start listening, there is no IE compatibility. The event handle is inserted into the handles with handler, which prepares for the subsequent remove. The proxy here is an extension of the event and is added when return false is called.
Preventdefault () and Stoppropagation ().

Off remove

Can be seen, and on is the corresponding wording, the same can be divided into three parts, but the function here is to remove the monitoring only.

Directly to the remove, the main thing here is to use Findhandlers to find the event and selector, and then delete the corresponding events in handlers, and call RemoveEventListener To remove the event handler.

$. Event Custom Events

This is used by CreateEvent () and Initevent (), where the event type is the default events (DOM3) if it is not a mouseevents defined in specialevents.
Look at the custom event object:

As you can see, because the event is encapsulated with compatible (), there are zepto new properties and the props property we passed in.

Trigger Trigger

We know that the API for triggering events provided in the DOM3 level is dispatchevent () (FireEvent () in low-version IE), and Zepto is the same here:

As you can see, the parameter event is treated as an object, which means that the trigger can be created directly using the + trigger, and the dispatchevent is triggered directly, if not the DOM node, the Triggerhandler () is used. To trigger.

Triggerhandler Trigger

As you can see, custom events are no longer triggered if the node has previously bound other event handlers and has used Stopimmdiatepropagation ().
Demo

$.proxy

This is actually a separate function, and the proxy used in the Add () function is the Handler.proxy () function, which has nothing to do with this. This function works much like extend, except that it extends the context (execution environment).
I think the most important thing is,

fn.apply(fn.apply(context, args ? args.concat(slice.call(arguments)) : arguments))$.proxy.apply(null,args);

Self-Simulation Click event

Zepto is actually in order to be able to use on the mobile phone lightweight to create, in order to use the non-lag, the phone can not use the Click event, there is delay, the reason not to say, write a small demo, you can see the PC and mobile phone Click event time difference:
Touch and click Demo

If the PC side, preferably with chrome, no big consideration for compatibility. You can also simulate touch events with developer tools.
So Zepto provides the touch module, and I'm going to simulate the tap event myself, and then I'll customize some of the events in a row:
Touch and Tap Demo

My idea is that the touch event triggers very quickly, then uses the touch event to simulate the click, with Touchstart and Touchend as the start and end, only to consider the single finger case, the touch event itself is:

• Touches: Represents an array of touch objects that are currently tracked by touching operations.
• Targettouches: An array of touch objects that are specific to the event target.
• Changetouches: An array of touch objects that represent what has changed since the last touch.
  These three arrays will contain the following properties:
• ClientX: Touch the x-coordinate of the target in the viewport.
• ClientY: Touch the y-coordinate of the target in the viewport.
• Identifier: Identifies the unique ID of the touch.
• PageX: Touch the x-coordinate of the target in the page.
• Pagey: Touch the y-coordinate of the target in the page.
• ScreenX: Touch the x-coordinate of the target in the screen.
• ScreenY: Touch the y-coordinate of the target in the screen.
• Target: Touch the DOM node destination.
  You can use touches in Touchstart, and in touchend there is no touches array information, and changetouches to get the information at the end of the touch. I mainly use Pagex and Pagey, judging under 250ms, if the finger at a point (I set the 14px size of the range,) Touchstart plus touchend are triggered, a tap event, or Createvent, So the return is a custom tap event
  

I did not put the touch property into the custom event, on a layer, so also did not consider to take the bubble, the back can be perfected, tap is OK, dbltap a little bit of time.

Zepto's Touch module

The entire touch module is also simple, starting with the Portal:

You can see that Zepto added these events, and did a short processing, the whole part of the most important is to bind the document Touch,mspointer,pointer, Msgestureevent Touch Events, but the above

See, there should be settimeout, the following Cancelall () also has the use of cleartimeout.
Watch the touch event first, and the rest is compatible anyway.
Zepto defined local variable touch has four values, x1,x2,y1,y2, should be used to record the first trigger point and the second trigger point, sure enough in the listener Touchmove event callback, using two points to calculate the offset, But here is the way all offsets are compared to the initial values and then summarized.
In Touchend, the swipe (swipe) and tap (click) are processed, because DeltaX and deltay need to be triggered in the range of 30*30, but its offset is the sum of move moves, so the fault tolerance at the time of triggering is low, that is, not better out, Compared to other operations.
In the processing of touchcancel, all deferred operations are cleared.
At the same time, the entire operation is actually tied to the document, so if there are other touch events tied to the doucment, and the Bubbling event is canceled, then all operations will be invalidated.

Touch of the point of penetration

Specially wrote the next demo to test the point through the problem, point through the incident. Here is also the delay of the previous click300ms problems, if the top is always good, even if the click disappears, then if the upper layer is a touch event, the lower layer is a tag, input or the node that binds the Click event, it will also be triggered, We can only say that the Zepto touch event also needs our own to expand and improve.
After a detailed study of JavaScript events, there are a number of ways to solve this problem, such as:

1. Preventdefault () to cancel the default events for Touchstart and Touchend.
2. A layer of transparency between the two layers is used to block the click of the 300ms after it is passed to the lower level.
3. Pointer-events:none; The Css3 property can cancel all click events on a node. Unfortunately browser support is not good
4. Fastclick, the old want to read the next Fastclick how to achieve, just read it.

Fastclick

The use is very simple, as long as FastClick.attach(document.body); good, on GitHub also introduced another two ways, can not use Fastclick to quickly click.

Specifically, you can go directly to its GitHub address to see Https://github.com/ftlabs/fastclick.
I modified the previous example, added a Click event example, you can see that the basic is slower than the Touchend 1ms. And the Click event is used, so there is no point-through event.

Also enter from the portal, inside the code, instantiate Fastclick (), which has two parameters: Layer and Options,layer are the document.bodywe passed before,
In the Fastclick () function, you can first find

The Click,touch event that is equivalent to the node on the document.body is handled by the Fastclick internal event, and if there is an OnClick event on the layer, it is also oldonclick replicated.

Needless to say on the PC, the node of the binding operation must first be handled by the click Listener.

The trackingclick here should be if the touchend in the previous page is blocked by UI events (which can be easily simulated, that is, if the character is selected), reset the empty.
On the phone, the first action that is triggered must be touchstart and touchmove,touchend.

Here the targetelement is very important, actually is the above mentioned event target, the actual touch of the node goal, this property will be used in the next move,end to determine whether the middle of the festival points, and used in Sendclick for real triggering events.

Return Touchstart, compatible first not to look at, here for the initial node is also done storage, touchStartX,touchStartY .
And the next for DOUBLE-TAP processing, actually need to see the demand, if the default value, then the second click in 200ms will prohibit triggering its default event event.preventDefault() , on the phone can not trigger the double-click event.

Then is Touchmove, here is very short, just for targetelement made a judgment, whether it is the same touch node.

In the Touchend, the same slightly too compatibility does not look, but I did learn a native API, document.elementFromPoint the incoming x, y to find the node, just recognize it, actually not practical.

In fact, there are three ways to operate the Fastclick internal custom events, but when Targettagname=label, here focus a bit, the touch here to the Needsclick only, and in these two pieces, you can know, If you add and classname needsFocus to needsClick A, the Fastclick will be interrupted, using the native event:

• Needsfocus: The first to determine whether the event from Touchstart to Touchend is more than 100ms, the targetelement will be empty, in fact, is to return to the original method, cancel the Fastclick event. Then there's the focus event.
  
  The Setselectionrange (length,length) is used here, and the text is selected first.
  
  Interested can go to MDN to see, but I tested, the above example has a input, which does have http://www.cnblogs.com/vajoy/p/5522114.html#!/follow mentioned problems, The cursor moves directly to the last face when the Quick Click is reached, and the parameter passed in is length, which naturally runs to the last face.
  And then triggered by Sendclick, there is a problem, and after the custom click is triggered,
  
  Cancel the focus operation we clicked on, here I first commented on the code, sure enough, the cursor first set to the end, and then set to the correct position, although the above blogger's method of suspending the problem, but in some browsers still exist this problem, and actually still is the cursor to the end, and then set to the correct position, Instead of directly using the simulation focus, the author's own comments are iOS7, but the focus is deviceisios, not deviceisioswithbadtarget, and it can solve the problem.

• Needsclick: Here first preventdefault, then use Sendclick, the above slightly introduced below, here the simulation is Mouseevents event, use Targetelement to trigger.

So why Fastclick do not penetrate, I naturally still find the code where the use of preventdefault and stopimmediatepropagation, in Onmouse, Or to prevent the fast click and add to the blocking operation, in fact, the blocking point is still in the Needsclick event.preventDefault() , after the deletion, the page will still click through the tap.

Comparison

Know or Preventdefault () played a role, we look back at the touch module, compared to Fastclick, in fact, both the main body layer are similar, Document and Document.body actually in most cases, the clickable domain is the same, that is, both are bound to the outermost (approximate), but Fastclick provides layer and options, which means that risk can be avoided, and Zepto's touch module is directly bound to the Do Cument above, at least in use, and not fastclick convenient, but its definition of various touch action, very meaningful, said above, in the Zepto to solve the point through, you can:

$("#btn").tap(function(){  // do something}).on(‘touchend‘,function(e){ e.preventDefault();});

When reading the source code, the layer bound part, which has a diagram above, is indeed misleading. Because in fact the onclick can not go, the reason why the trigger on the phone is still the Click event, is because in the Sendclick directly using dispatchevent () triggered the click, So will be from the Fastclick definition of This.onclick (), in fact, this part can be like zepto into the Touchend module inside.
So, the core of the two code is essentially the same, the difference is the focus method of the tap event that is added to the Fastclick, and if you add preventdefault () directly to the zepto touch, input does not get the focus, So the focus event can be introduced to solve the problem


There may be compatibility issues, and you can add compatibility when you finish writing jquery for Blur () and focus ().
It's not going to be a point now.
You can also put touchstart,touchend operations on specific nodes, and then process them in the node, but this will change the larger. Zepto there is a method $.proxy, put here has the miraculous, described above.

Other

As for saying delegate,undelegate,live, die these agent events, as well as bind,unbind and other binding operations , in fact, are on in action, not elaborate. In the middle to see the Fastclick, and other things, in fact, Monday is finished, or the foundation is weak AH.
followed by a look at jquery's event operation, the pressure Alexander.

JavaScript Event Detail-zepto Event implementation