jQuery-1.9.1 Source Analysis Series (10) Event System event Packaging _jquery

In the previous article to introduce the jQuery-1.9.1 Source Analysis Series (10) Event System Event architecture, this article continues to introduce jquery1.9.1 source code Analysis series related knowledge, specific content please see below.

The first thing to understand is that the native event of the browser is read-only, limiting the operation of jquery on him. For a simple example, you can see why jquery has to construct a new event object.

In delegate processing, a node delegate b node executes the FN function when a is click. When the event bubbles to the B node, the context environment needs to be correct when the FN is executed, and the a node executes the FN rather than the B node. How to guarantee the implementation of the FN context is a node: look at the source (red part)

Execute
ret = ((jquery.event.special[Handleobj.origtype] | | {}). Handle | | Handleobj.handler). Apply (Matched.elem, args);

Use apply to replace the context of the execution function with the A node (Matched.elem). There is also a bit of args[0] that is event object events. And how to ensure that event is a node of events? This is the function of this important attribute of event.currenttarget, so one step before performing the Apply

Event.currenttarget = Matched.elem;

Change the Currenttarget property of the event object directly, which cannot be done in a browser-local event. So there is the event object that constructs jquery based on local events.

Events are divided into two types: mouse events and keyboard events (not knowing when a touch event can be added). Take a look at the detailed properties of both

　　

Some of these are browsers of their own, not the standard of the consortium. jquery divides event properties into three blocks

Both mouse and keyboard events have properties JQuery.event.props: "Altkey bubbles cancelable ctrlkey currenttarget eventphase metakey relatedtarget Shiftkey target TimeStamp view which ". Split (" ")

Keyboard event-specific properties JQuery.event.keyHooks.props: "Char charcode key KeyCode". Split ("")

Mouse event-specific properties JQuery.event.mouseHooks.props: "button buttons ClientX clientY fromelement offsetX offsetY pagex pagey ScreenX s Creeny toelement ". Split (" ")

A. Constructing a new event object JQuery.event.fix (originalevent)

Constructing a new event object is done in three steps

The first step is to use the event = new Jquery.event (originalevent) to construct the object (click here) to create the event, and add isdefaultprevented, Originalevent, type, timestamp, and events have been modified tags (optimized for use, avoiding unnecessary processing). The source code of Jquery.event (SRC, props) is as follows

jquery.event = function (src, props) {
  //Allow instantiation without the ' new ' keyword
  if (!) ( This is instanceof Jquery.event)) {return
    new jquery.event (src, props);
  }
  SRC is the event object
  if (src && src.type) {
    this.originalevent = src;
    This.type = Src.type;
    The event bubbling document may be marked to prevent the default event from occurring; This function can react to the correct value of the flag being blocked
    this.isdefaultprevented = (src.defaultprevented | | Src.returnvalue = = False | |
      Src.getpreventdefault && src.getpreventdefault ()? Returntrue:returnfalse;
  SRC is the event type
  } else {
    this.type = src;
  }
  Adds an explicitly provided feature to the event object
  if (props) {
    jquery.extend (this, props);
  Create a timestamp if the incoming event is more than one
  This.timestamp = src && src.timestamp | | jquery.now ();
  Mark event has been fixed
  this[jquery.expando] = true;

The first step after the constructed event object

　　

The second step is to identify what the current event is and then copy the corresponding attributes from the browser local event originalevent.

Create a writable copy of the event object and format some of the feature names
  var i, prop, copy,
    type = Event.type,
    originalevent = event,
    Fixhook = this.fixhooks[type];
  if (!fixhook) {
    this.fixhooks[type] = Fixhook =
    //rmouseevent=/^ (?: mouse|contextmenu) |click/
    Rmouseevent.test (type)?　　This.mousehooks:
    //rkeyevent=/^key/
    rkeyevent.test (type)? This.keyhooks:
    {};
  }
Get the list of attributes to copy from the native event
  copy = Fixhook.props this.props.concat (fixhook.props): This.props;
...
Copy the native attributes to the new event
  i = copy.length;
  while (i--) {
    prop = copy[i];
    event[prop] = originalevent[prop];
  }

The third step, the compatibility of related properties

 ie<9 fixed target eigenvalue
  if (!event.target) {
    event.target = originalevent.srcelement | | document;
  }
  Chrome 23+, safari?,target feature value cannot be text node
  if (Event.target.nodeType = = 3) {
    Event.target = Event.target.parentNo De;
  Ie<9, for mouse/keyboard events, if Metakey is not defined then set metakey==false
  Event.metakey =!! Event.metakey;
  Call Hooks filter return
  fixhook.filter fixhook.filter (event, originalevent): event;

The last line of code is compatible with mouse events and keyboard events.

Fixhook.filter could be jQuery.event.keyHooks.filter.

KeyHooks.filter:function (event, original) {
  //add which eigenvalue to keyboard events
  if (Event.which = = null) {
    Event.which = Original.charcode!= null? Original.charCode:original.keyCode;
  }
  return event;
}

or this JQuery.event.mouseHooks.filter

MouseHooks.filter:function (event, original) {var body, Eventdoc, doc, button = Original.button, fromelement = O
  Riginal.fromelement; If the event pagex/y feature is missing, use the available clientx/y to calculate if (Event.pagex = null && original.clientx!= null) {Eventdoc = Ev ent.target.ownerDocument | |
    Document
    doc = eventdoc.documentelement;
    BODY = Eventdoc.body; Event.pagex = Original.clientx + (Doc && Doc.scrollleft | | body && Body.scrollleft | | 0)-(Doc &&A mp Doc.clientleft | | Body && Body.clientleft | |
    0); Event.pagey = Original.clienty + (Doc && Doc.scrolltop | | body && Body.scrolltop | | 0)-(Doc &&amp ; Doc.clienttop | | Body && Body.clienttop | |
  0);  ///If necessary add Relatedtarget feature if (!event.relatedtarget && fromelement) {event.relatedtarget = Fromelement = = = Event.target?
  Original.toElement:fromElement; //Add click event which eigenvalue: 1 = = left; 2 = = middle; 3 = = right//Note: button is not standard, so do notis to use if (!event.which && button!== undefined) {Event.which = (Button & 1? 1: (Button & 2? 3
  : (Button & 4? 2:0));
return event; }

The most recent event object that was completed for the build is as follows (for example, with mouse events)

　　

The native event is saved in the originalevent, target holds the destination node (the delegate's node, the event source), and other information skips

B. Overloaded event methods

When you build a new Event object = Jquery.event (originalevent), the event inherits the methods in JQuery.event.prototype. Take a look at the ways

　　

The previous analysis of the role of overloaded stoppropagation methods in JQuery.event.prototype: In addition to the blocking bubbling method of invoking event objects, one of the functions is that the delegate node has multiple delegate event processing waiting to be processed, and one of the events calls the Event.stoppro Pagation () will prevent execution of subsequent event processing. Click here to search for key words to view

The Preventdefault function also has a similar effect. This code is added to the Preventdefault function.

this.ispropagationstopped = Returntrue;

The default action for the DOM node is determined by ispropagationstopped () in both the triggering event trigger function and the simulated bubbling simulate function. Source code is as follows

Isimmediatepropagationstopped is a stoppropagation special use, isimmediatepropagationstopped will directly block the current processing and subsequent event handling, Instead, Stoppropagation performs the current processing and then blocks subsequent event processing that waits to be performed.

Source code is as follows

Jquery.event ECMAScript Language Bindings
//http://www.w.org/TR//WD-DOM-Level--Events-/specified based on DOM events　　ecma-script-binding.html
jQuery.Event.prototype = {
Isdefaultprevented:returnfalse,
Ispropagationstopped:returnfalse,
Isimmediatepropagationstopped:returnfalse,
preventdefault:function ()　　　　{
var e = this.originalevent;
this.isdefaultprevented = returntrue;
if (!e) {return;}
if (e.preventdefault) {
e.preventdefault ();
IE support
} else {
e.returnvalue = false;
}
,
stoppropagation:function () {
var e = this.originalevent;
this.ispropagationstopped = returntrue;
if (!e) {return;}
if (e.stoppropagation) {
e.stoppropagation ();
}
//IE supports
e.cancelbubble = true;
},
stopimmediatepropagation:function () {
this.isimmediatepropagationstopped = returntrue;
This.stoppropagation ();
}
}

The above is the article to introduce the jQuery-1.9.1 Source Analysis Series (10) Event System event Packaging, I hope you like.