Introduction to qwrap: eventw-event Packaging

Events are also important in Dom operations. However, for projects Program You only need to know how to use it. If you have not understood the standard DOM event before reading this article, ignore this article to avoid further tangle.
Like a Node object, event objects cannot be scaled and compatible by rendering the prototype of the native DOM event. Therefore, the wrap model is used to solve this problem.
Eventw is the packaging of events. Its core is a native event.
The previous introduction of nodew is based on the evolution of ideas from a simple perspective. In the opposite direction, we will look at the implementation of eventw from the final usage.

Event is used in event monitoring.
Add events to elements. The common usage is as follows:

 //  <Div class = "mydiv"> content1 <a href = "http://www.baidu.com"> Baidu </a> </div>  
  VaR  Handler  =  Function (E ){
Alert (E. type );  //  Event Type  
  Alert (  This  . Innerhtml );  //  This is the monitored Node object.  
  Alert(e.tar get. innerhtml );  //  This.tar get is the object that triggers the event  
  Alert (E. preventdefault ());  // Block default event operations  
  };
W (  '  Div. AAA  '  ). On (  '  Click  '  , Handler ); 

Those familiar with browsers may know that the above usage is natural for standard browsers; but for some versions of IE, if on directly calls the native attachevent, the aboveCodeWill not be the expected effect,
Among them, the e.tar get will be empty, and this will be a window, and so on. In many cases, it is not as expected.
But in fact we can use it like this. Why?
Because nodew. the on in prototype performs a small operation of stealing the bar: it performs a transformation of the handler function, and then transmits the transformed result to the Dom as a new monitoring function.
Let's take a look at the on static implementation code:

  eventtargeth. on  =    function   (element, sevent, handler) {
   var   _ listener  =  listener (element, sevent, Handler); 
 eventtargeth. addeventlistener (element, name, _ listener); 
}; 
   function   listener (element, name, Handler) {
   return     function   (E) {
   return   firehandler (element, E, handler, name); 
}; 
} 

In this small bid, let's take the initiative of handler's this and arguments from the browser and put them in firehandler.
With this initiative, we set this in handler to point to the monitored node, and changed arguments [0] to a fixed E. However, this e is not the native "E | window. event, and a new thing: eventw instance, equivalent to: E = new eventw (E | window. event ).

Let's take a look at what eventw is:

 /*  *
* @ Class eventw event wrap, event object wrappers
* @ Namespace QW
  */  
(  Function  (){
  VaR  Mix  =  QW. objecth. Mix,
Methodize  = QW. helperh. methodize;

QW. eventw  =     Function  (E ){
  This  . Core  =  E  |  Window. event;  //  Core native event instance  
    This . Target  =     This  . Gettarget ();  //  Elements triggered by the target event  
    This  . Relatedtarget  =     This  . Getrelatedtarget ();  //  Elements related to the relatedtarget event. 
    This  . Pagex  =     This  . Getpagex ();
  This  . Pagey  =     This  . Getpagey ();
  This  . Detail  =    This  . Getdetail ();
  This  . Keycode  =     This  . Getkeycode ();
  This  . Ctrlkey  =     This  . Getctrlkey ();
  This  . Shiftkey =     This  . Getshiftkey ();
  This  . Altkey  =     This  . Getaltkey ();
  This  . Button  =     This  . Core. Button;
  This . Clientx  =     This  . Core. clientx;
  This  . Clienty  =     This  . Core. clienty;
  This  . Type  =     This . Core. type;
};

Mix (QW. eventw. prototype, methodize (QW. eventh,  '  Core  '  ));
}()); 

It looks very simple. It is actually an object with the core as the native event. However, when constructing the object, it is assigned a set of attributes in accordance with the DOM Event standard.
Some colleagues may ask: where does this. gettarget and this. getrelatedtarget come from?
A: This sentence brings about: "mix (QW. eventw. prototype, methodize (QW. eventh, 'core '));"
This sentence means to convert all the static methods in eventh into the prototype method of eventw. In addition to the constructor, methods such as preventdefault and cancelbubble are also used. Therefore, in actual applications, you can call E. preventdefault () to block default events.
After understanding these ideas, the code looks very simple.

Some may be confused. Is it not efficient to frequently create eventw, especially when mousemove?
Although attributes are frequently created and assigned, they are all simple calls and assignments. Even if the mouse frequency is adjusted to 100Hz, the creation time is negligible. ---- No related values have been tested, but no problems have been found in all current application projects.

In qwrap, there are three evnet-related classes and namespaces:
Eventh: http://dev.qwrap.com/resource/js/dom/event.h.js;
Eventtargeth: http://dev.qwrap.com/resource/js/dom/eventtarget.h.js;
Eventw: http://dev.qwrap.com/resource/js/dom/event.w.js.
Both eventh and eventtargeth meet the "pure, static, targeted" Features of helper, which is easier to understand.
In component development, the above two helper may be used directly to achieve no dependency,
In projects that use qwrap, they are almost not used, because the eventh function has been passed to eventw, And the eventtargeth function will also be passed to nodew.
The transfer and conversion of this function is the retouch mechanism proposed by qwrap, And the next session is decomposed.

Appendix: qwrap Web site: http://www.qwrap.com