jquery Foundation Events

JQuery Events
1.ready ()-Similar to the role of window.onload
* notation
*$ (document). Ready (function () {});
*$ (). Ready (function () {});
*$ (function () {});
* The difference between ready and onload
* Ready
* with Shorthand method
* Allow multiple in an HTML page
* Wait for all DOM structures in the HTML page to load and execute
* OnLoad
* No Shorthand method
* In an HTML page only one
* You must wait for all content in the HTML page to complete before you can execute

1    //Example2$ (document). Ready (function(){3Console.log ($ ("#user"). Val ());4     });5 6     //jquery-undefined-a relatively sophisticated event handling mechanism7     var$user = $ ("#user");8Console.log ($user. Val ());//empty element Call method does not error, return undefined9 Ten     //DOM-Error dom empty element Call method property Error One     varuser = document.getElementById ("User11"); A     if(user) { - Console.log (user.value); -}Else{ theConsole.log ("Undefined"); -}

View Code

1 //the difference between event-ready and onload in jquery (nearly 6 milliseconds apart)2     varStartTime =NewDate (). GetTime ();3$(function(){4         varEndTime1 =NewDate (). GetTime ();5Console.log ("Ready Execution Time:" + (Endtime1-starttime) + "MS");6     });7Window.onload =function(){8         varEndTime2 =NewDate (). GetTime ();9Console.log ("OnLoad Execution Time:" + (Endtime2-starttime) + "MS");Ten}

View Code

2. Event binding and Unbinding
* BIND (TYPE,DATA,FN)-bind event
* Type-Specifies the event name of the binding
* If multiple events are bound, use spaces to separate them
* Data-optional, additional data object that is passed to the event object as the value of the Event.data property
* FN-handler function for binding event
* UNBIND ()-Unbind event
* Type-Specifies the name of the event to unbind
* No content is passed by default-unbind all Events
* Specify single event name-Unbind individual events
* Specify multiple event names-Unbind multiple events
* What events are allowed to be specified for binding and unbinding?
Blur, Focus, Focusin, focusout, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, M Ouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, error.
* Note
* The so-called Click () event is a shorthand for bind (' click ')

1     /*2 * BIND (TYPE,DATA,FN) Method-Event binding3 * * Type-Sets the event name of the binding, string type.4 * * Data-optional, additional data object to be passed as Event.data property value to the event object5 * * fn-event corresponding processing function6      */7$ (". D1"). Bind ("click",function(){8         if($ (". D2"). Is (": Hidden")){9$ (". D2"). Show (3000);Ten}Else{ One$ (". D2"). Hide (3000); A         } -     }); -     //Multi-Event binding the$ (". D1>h3"). Bind ("MouseOver mouseout",function(){ -         if($ (". D2"). Is (": Hidden")){ -$ (". D2"). Show (1000); -}Else{ +$ (". D2"). Hide (1000); -         } +     }); A     /* at * UNBIND ()-Unbind event -      */ -$ (". D1"). Unbind ();//Unbind All Events -     //Unbind a specified event -$ (". D1>h3"). Unbind ("MouseOver mouseout");

View Code

3. Event Object
* Event object is encapsulated in parameters of the handler function corresponding to the event
Ele.onclick = function (event) {
Event
}
* Common usage
* pagex/clientx/offsetx/x-current x Axis
* page y/clienty/offsety/y-Current Y-Axis
* Target-source object (element) of the current binding event
* returnvalue-return value, Boolean type
* return false-resistance　　Default behavior of the page
* which/keycode/charcode-keyboard corresponding value
4. Event bubbling
* Capture
* bubbling
5. Simulation Events (Learn)
* Trigger ()

1     $ ("button"). Click (function(event,a,b) {2        console.log (event.target); 3         Console.log ("A:" +a); 4         Console.log ("B:" +B); 5     }). Trigger ("Click", [' this was a. ', ' this is B. '); // trigger automatically triggers the same name event

View Code

6. Event switching
* Hover (Over,out) method
* Handling function of the Over-onmouseover event
* Handling function of the Out-onmouseout event
7.DOM Event Review
* Native DOM bound events three kinds
* Specify event names in HTML page elements
* in JavaScript code
* Element.onclick = function () {}
* Element.addeventlistener ("click", Function () {});

jquery Foundation Events