Jquery event trigger Analysis

2. Registered events, such as onclick. When you click this element, the registered event processing function of the event is automatically triggered. But sometimes we need to useProgramTo trigger an event, you must use force to trigger an event. In IE, we can use. fireevent. For example, <form onsubmit ="()">, If the form is submitted using form. Submit () of the button, the onsumbit event is not triggered automatically. If necessary, $ (": Form") before submit ")[0]. Fireevent ("onsubmit",) to trigger this event.
4. There are three steps in Mozilla: var EVT = Document. createevent ('Htmlevents');
6. EVT. initevent ('Change',True,True); T. dispatchevent (EVT );
8. Prototype is implemented in this way. In jquery, the implementation method is a little different.
10. Trigger: function (type, Data, FN ){
12. Return This. Each (function (){
14. Jquery. event. Trigger (type, data,This,True, FN );
16. });},
18. Trigger has three parameters. The data parameter provides real-time transmission for the registered event function. If data [0] Preventdefault exists, data [0. FN is an instant and out-of-the-box event processing method. That is, if an event is not registered, you can pass in a processing function to process the event. If it has already been registered, it will be executed after the original event processing function.
20. // This method triggers all bound handler functions of the specified event type. However, the default browser action is not executed.
22. Triggerhandler: function (type, Data, FN ){
24. Return This[0] & Jquery. event. Trigger (type, data,This[0],False, FN );
26. },
28. Triggerhandle sets the donative parameter of jquery. event. TriggerFalseTo prevent the execution of the browser's default processing method. It is a little different from trigger, but it only processes the first element of the jquery object.
30. The preceding two methods call jquery. event. Trigger to complete the task:
32. Trigger: function (type, Data, ELEM, donative, extra ){
34. Data = jquery. makearray (data );// Data can be {XX: yy}
36. // Getdata is supported! In this form, exclusive = true indicates that
38. // All functions of the event are executed in different types of namespaces.
40. If(Type. indexof ("! ")> =0) {①
42. Type = type. Slice (0,-1); Var exclusive =True;
44. }
46. If(! ELEM ){// Process the Global Fire event ②
48. If(This. Global [type])
50. Jquery. Each (jquery. cache, function (){
52. // Find all the elements that register the event from the cache and trigger the processing function of the event.
54. If(This. Events &&This. Events [type])
56. Jquery. event. Trigger (type, data,This. Handle. ELEM );
58. });
60. }Else{// Process the fire event of a single element event ③
62. If(ELEM. nodetype =3| ELEM. nodetype =8)ReturnUndefined;
64. Var val, RET, FN = jquery. isfunction (ELEM [type] |Null),
66. // If the data parameter is not passed into the browser's event object, the event variable is true.
68. // If the data parameter itself is a group, true is used when the first element is not the event object of the browser.
70. // True for event. That is, if no event is passed in, a forged event object is created and data [0] exists.
72. Event =! Data [0] |! Data [0]. Preventdefault;
74. // Construct a forged event object without passing in the event object.
76. If(Event ){// Store the first 4 in the array
78. Data. unshift ({type: type, target: ELEM,
80. Preventdefault: function () {}, stoppropagation:
82. Function () {}, timestamp: Now ()});
84. Data [0] [Expando] =True;// The forged event object does not need to be corrected.
86. }
88. Data [0]. Type = type;// Prevent event name errors
90. // Perform the classification (namespace) of the event registration function. Not all.
92. If(Exclusive) data [0]. Exclusive =True;
96. // Unlike traditional processing methods such as prototype, fireevent is not used.
98. // Use the event handling method registered to the browser event by fire.
100. // There are three steps. First, the fire registers the event through jquery. event. Add. This event
102. // It may be a Custom Event (not registered to a browser event ).
104. // The second step is the local processing function of the event registered by fire using the ELEM. onclick method.
106. // Step 3 is the default fire event processing method (registered in the local onclick Mode)
108. // If it does not exist ).
112. // Events that are registered using jquery. event. Add are triggered here,
114. VaR handle = jquery. Data (ELEM,"Handle"); ⑤
116. If(Handle) val = handle. Apply (ELEM, data );// Here data is divided into multiple parameters
118. // The processing trigger registers the local processing method through ELEM. onfoo = function,
120. // But it is not triggered for links's. Click (), this will not be executed through addevent
122. // Event handling method registered by the method.
124. If((! FN | (jquery. nodename (ELEM,'A') & Type ="Click") ⑥
126. & ELEM ["On"+ Type] & ELEM ["On"+ Type]. Apply (ELEM, data) =False)
128. Val =False;
130. // The first few additional function parameters are given through data. Here, we will remove the forged event.
132. // Its last parameter is the result returned by a series of event processing functions, which are generally bool values.
134. // This function can process a scanning task based on the result.
136. If(Event) data. Shift ();
138. // Processing triggers the processing of the function specified by extra.
140. If(Extra & jquery. isfunction (extra) {7
142. Ret = extra. Apply (ELEM, val =Null? Data: Data. Concat (VAL ));
144. // If this function returns a value, the trigger return value is its return value.
146. // If not, it is the last return value of the series event processing function. Generally bool
148. If(Ret! = Undefined) val = ret;
150. }
152. // Trigger the default local event method, which is in the absence of event registration such as. onclick
154. // When the previous execution event processing function return value is not false, it will be executed.
156. // It can also control whether or not to execute through the donative command.
158. // For example, this. Submit () can be used in form to submit form.
160. If(FN & donative! =False& Val! =FalseBytes
162. &&! (Jquery. nodename (ELEM,'A') & Type ="Click")){
164. This. Triggered =True;
166. Try{ELEM [type] ();// For some hidden elements, ie reports an error
168. }Catch(E ){}
170. }
172. This. Triggered =False;
174. }
176. ReturnVal;
178. },
180. The fire event Method of jquery is totally different from the implementation in prototype. EXT and Yui do not provide a method to force the event to be triggered. For general thinking, the fireevent or dispatchevent method should be used to trigger browser events.
182. But jquery uses a different method. Events registered through jquery. event. Add (whether custom or registered to browser events) are stored in a cache corresponding to the element and event name. In the browser trigger, this is useless. However, it is used to obtain the corresponding event processing function from the cache when the program is forced to trigger. In this case, the browser event is discarded. You can also execute some custom event functions here. For example, place ⑤.
184. For event functions registered in the form of click or ELEM. onclick = function () {} in HTML tags. In section 6, it can use the callback function in the form of execution elements such as onclick. Only one function can be registered using this dom0 method.
186. Sometimes, if there is no event processing function such as onclick, the browser will execute the default processing function. For example, form. Submit (). The default event processing can also be controlled by the donative parameter.
188. The program forces the event to be triggered manually. One problem is how the event is generated, that is, no browser generates the event and passes it into the function. Prototype uses the newly generated dataavailable event. Such events have no effect. Jquery also uses the fake method to forge an event. For example, ④. It is better than prototype events because it can pass in the required event through the parameters of the trigger function. Prototype is not supported.
190. Through the above analysis, we can see that jquery builds the trigger function by simulating the execution process of the browser trigger event. First, execute the dom1 method (addevent) Registration event, then execute the dom0 method registration event, and finally see whether to execute the default event processing.
192. In section 7, we can see that trigger may also pass in callback functions and parameters to judge and process the results of the executed event processing function, forming a new result returned through the trigger function. This is useful sometimes.
194. In addition, it can also classify the event processing functions (namespace), and call the processing functions of different types of events (through jquery. event. add ). The processing of this classification is implemented in handle.
196. Handle: function (event ){
198. // Return undefined or false
200. Var val, RET, namespace, all, handlers;
202. // Modified the input parameter, which is referenced here.
204. Event = arguments [0] = Jquery. event. Fix (event | window. Event );
206. // Namespace Processing
208. Namespace = event. type. Split (".");
210. Event. type = namespace [0];
212. Namespace = namespace [1];
214. // All = true indicates that any handler and namespace do not exist.
216. // When event. Exclusive does not exist or is false, all = true.
218. All =! Namespace &&! Event. Exclusive;
220. // Find the list of handler functions for cached event names in element events
222. Handlers = (jquery. Data (This,"Events") | {}) [Event. Type];
224. For(Var j in handlers ){// Execute each processing function
226. VaR handler = handlers [J];
228. // Filter the functions by class
230. If(ALL | handler. type = namespace ){
232. // Input references and delete them later
234. Event. Handler = handler;
236. Event. Data = handler. Data;// Added when adding
238. Ret = handler. Apply (This, Arguments );// Execute the event processing function
240. If(Val! =False)
242. Val = ret;// If a processing function returns false, this function returns false.
244. If(Ret =False){// Do not perform the default action of the browser
246. Event. preventdefault ();
248. Event. stoppropagation ();
250. }
252. }
254. }
256. ReturnVal ;},
258. The main function of handle is to classify and orderly execute all registered processing functions of events.